JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <my-comp :username="username"></my-comp>
  <button @click="changeUser">
  Change User
  </button>
</div>

<template id="my-comp">
  <div>
    <input v-model="user"> {{user}}
  </div>
</template>

JavaScript

Vue.component('my-comp',{
  template: '#my-comp',
  props: ['username'],
  created() {
    this.user = this.username;
  },
  watch:{
    username(val){
      this.user = val;
    }
  },
  data(){
    return{
      user: ''
    }
  }
});

new Vue({
  el: "#app",
  methods:{
    changeUser(){
      this.username = "bar";
    }
  },
  data:{
    username: 'foo'
  }
})