Problems with $ref between parent and child component - vue.js

Question

I'm using dynamic forms to break up a long form. Beneath each dynamic form are two action buttons which, when clicked, send the user back one form set or onto the next one (unless the end of the form has been reached - the 'Next' button is replaced by a 'Submit' button).
As I have three different forms that all use the same action buttons, I decided to create a child component ('ActionButtons') for action buttons - and in doing so I've gone from code that worked to code that doesn't.
Specifically, I'm having problems with ref information involved in controlling the 'Next' button. The error message is Error in nextTick: "TypeError: Cannot read property '$v' of undefined"
The code that worked fine (i.e. before I created 'ActionButtons') is:
<template>
...
<keep-alive>
<component
ref="currentStep"
:is="currentStep"
#update="processStep"
:wizard-data="formvars"
></component>
</keep-alive>
...
<button
#click="nextButtonAction"
:disabled="!canGoNext"
class="btn"
>{{isLastStep ? 'Submit' : 'Next'}}</button>
...
</template>
<script>
import Gap2InputInfo from './Gap2InputInfo'
import Gap2Materials from './Gap2Materials'
export default {
name: 'GAP2Form',
components: {
Gap2InputInfo,
Gap2Materials
},
data () {
return {
currentStepNumber: 1,
canGoNext: false,
wizardData: {},
steps: [
'Gap2InputInfo',
'Gap2Materials',
],
formvars: {
id: 0,
purchase: null,
name: null,
quantity: null,
supplier: null,
nsteps: 0
},
updatedData: null
}
},
computed: {
isLastStep () {
return this.currentStepNumber === this.length
},
length () {
this.formvars.nsteps = this.steps.length;
return this.steps.length
},
currentStep () {
return this.steps[this.currentStepNumber - 1];
},
},
methods: {
nextButtonAction () {
if (this.isLastStep) {
this.submitForm()
} else {
this.goNext()
}
},
processStep (step) {
Object.assign(this.formvars, step.data);
this.canGoNext = step.valid
},
goBack () {
this.currentStepNumber--;
this.canGoNext = true;
},
goNext () {
this.currentStepNumber++;
this.$nextTick(() => {
this.canGoNext = !this.$refs.currentStep.$v.$invalid
})
}
}
}
</script>
In creating the child component, I send the following props to the child
<action-buttons :currentStepNumber="currentStepNumber" :canGoNext="canGoNext" :isLastStep="isLastStep" :currentStep="currentStep"></action-buttons>
and have moved the methods associated with the button actions from the parent to the child component.
My child component is:
<template>
<div>
<div id="actions" class="buttons">
<button
#click="goBack"
v-if="mcurrentStepNumber > 1"
class="btn-outlined"
>{{$t('back')}}
</button>
<button
#click="nextButtonAction"
:disabled="!canGoNext"
class="btn"
>{{isLastStep ? 'Submit' : 'Next'}}</button>
</div>
</div>
</template>
<script>
import {required} from 'vuelidate/lib/validators'
export default {
name: "ActionButtons",
props: ['currentStepNumber','canGoNext','isLastStep','currentStep'],
data: function () {
return {
mcurrentStepNumber: this.currentStepNumber,
mcurrentStep: this.currentStep,
mcanGoNext: this.canGoNext,
misLastStep: this.isLastStep
}
},
methods: {
nextButtonAction () {
if (this.misLastStep) {
this.submitForm()
} else {
this.goNext()
}
},
goBack () {
this.mcurrentStepNumber--;
this.mcanGoNext = true;
},
goNext () {
this.mcurrentStepNumber++;
this.$nextTick(() => {
this.mcanGoNext = !this.$refs.currentStep.$v.$invalid **** Error triggered at this line
})
}
}
}
</script>
Now when I click the 'Next' button, I get the Cannot read property '$v' of undefined error message. If I've interpreted it correctly, it cannot read the $refs data. I tried altering the code in the child component to
this.mcanGoNext = !this.$parent.$refs.currentStep.$v.$invalid
but the outcome remained the same. Where am I going wrong?
Thanks, Tom.