JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="demo">
  <service :service-name="serviceName"></service>
</div>

JavaScript

Vue.component('service', {
  template: '<div>' +
    '<div>{{serviceName}}</div>' +
    '<input v-model="serviceName">' +
    '</div>',
  props: ['serviceName'],
})

var demo = new Vue({
  el: '#demo',
  data: {
    allData: {
      serviceName: 'Service1',
      serviceType: '0',
      otherInfo: 'xxxinfo',
    },
  },
  computed: {
    serviceName: {
      get: function() {
        return this.allData.serviceName
      },
      set: function(newVal) {
        this.allData.serviceName = newVal;
      }
    }
  }
})