duplicated operator(or attribute) on the same input control - v-model and @change
Responding to Your question

This is good use of ref and Object.assign() but normally this would be a good place to use a watched Property, or if you need to add dashes, a computed property.

Take a look at the example below, which uses a watcher, instead of the @onchange, which means that the method applyData() can be eliminated:



const form = new Vue({
    el: '#form',
    data: function () {
      return {
        deliveryInfo: {
          receiver: ''
        }
      }
    },
    watch: {
      'deliveryInfo.receiver': function(newValue, oldValue) {
        console.log('receiver changed - deliveryinfo:', this.deliveryInfo);
        this.$emit('applyChildData', this.deliveryInfo);
      }
    },
    methods: {
      test: function () {
          console.log('set John Doe');
        this.deliveryInfo = Object.assign({}, this.deliveryInfo, {receiver: 'John Doe'});
        console.log('After change ', this.deliveryInfo);
        // It triggers applyData method and change input element value
        // But when I remove v-model in input value, it is not working
      }
    }
  });
&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

  &lt;div id="form"&gt;
    &lt;!-- I got question here --&gt;
    &lt;input type="text" ref="receiver" v-model="deliveryInfo.receiver" /&gt;&lt;!--@change="applyData('receiver')"--&gt;
    &lt;button type="button" @click="test"&gt;TEST&lt;/button&gt;
  &lt;/div&gt;




Or the snippet below which uses a computed property to add a dash between the third and fourth characters...



const form = new Vue({
    el: '#form',
    data: function () {
      return {
        deliveryInfo: {
          receiver: ''
        }
      }
    },
    computed: {
      dashedReceiver: function() {
        if (this.deliveryInfo.receiver.length &gt; 3) {
          return this.deliveryInfo.receiver.slice(0,3) + '-' + this.deliveryInfo.receiver.slice(3);
        }
        return this.deliveryInfo.receiver;
      }
    }
  });
&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

  &lt;div id="form"&gt;
    &lt;!-- I got question here --&gt;
    &lt;input type="text" ref="receiver" v-model="deliveryInfo.receiver" /&gt;
    &lt;div&gt;{{dashedReceiver}}&lt;/div&gt;
  &lt;/div&gt;




Other feedback

One other critique I have is this line:


let ref = this.$refs[refName];



That variable never gets re-assigned so to avoid accidental re-assignment, use const instead of let. There are some who recommend the following:


  
  use const by default
  only use let if rebinding is needed
  1
  


There may not be much of a performance difference here although after reading some SO answers like this one and this one there is a potential but that might only be if a primitive type value (e.g. 42) was used.

1https://mathiasbynens.be/notes/es6-const