[Vuejs]-Vue 2 – how to bind Parent and Child components – with FORM contents

not sure whether to solve your problem or not, here are my experience:

1. use ref and $ref, you can set the ref tag on your child component of the parent component, such as this example :

<div id="app">
    <!-- ref attribute -->
    <child-component ref="child1"></child-component>
    <child-component ref="child2"></child-component>
    <button @click="show">alert child-component count</button>
</div>


// Child component
Vue.component('child-component', {
    data: function () {
        return {
            count: 20
        };
    },
    methods: {
        getOne: function () {
            this.count++;
        }
    },
    template: '<button @click="getOne">{{ count }}</button>'
});

// Parent Component
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        show: function () {

            // get "count" of child component by $refs 
            console.log(this.$refs.child1.count);
            console.log(this.$refs.child2.count);
        }
    }
});

It’s not only can get a specific parameter or variable of the child component but also can get the whole child component.
I hope the above solution can help you 🙂