SOURCE

//子组件定义
var child = Vue.component('child', {
    props: ['pname'],
    data: function(){
        return {
            child_name: ''
        }
    },
    computed: {
        cname: {
            get: function(){
                this.child_name = JSON.parse(JSON.stringify(this.pname))
                return this.pname
            },
            set: function(newv){
                this.child_name = JSON.parse(JSON.stringify(this.pname))
            }
        }
    },
    methods: {
        change_child_name: function(){
			this.child_name.val = '3333'
        },
    },
    template: '<div><div v-show="false">{{cname}}</div><p>子组件的名字是：{{child_name.val}}</p><button @click="change_child_name">切换子组件名字</button></div>'
})

//父组件定义
var vm = new Vue({  
    el: '#app', 
  	data: {
      	parent_name: {
           val: '1111'
        }
    },
    components: {
        child: child,
    },
    methods: {  
        change_parent_name: function () {
            this.parent_name.val = '2222'
        },
        change_parent_name1: function(){
            this.parent_name.val = '1111'
        }
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">  
    <p>父组件名字：{{parent_name.val}}</p>
    <button @click="change_parent_name">切换父组件名字</button>
    <button @click="change_parent_name1">来回切换父组件名字</button>
    <child ref="child" :pname="parent_name"></child>
</div>