Vue data binding problem

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <input v-model="x">
  <div>{{y}}</div>
</div>

<script>
new Vue({
  el: "-sharpapp",
  data: {
    
    y:"1"  
  },
  computed:{
    x:{
      get(){return 555},
      set(val){
        //y
        this.y=val;
         
      }
    }
     
  }
})
</script>
</body>
</html>

/ / the above code can run in the browser
my problem is that there is a problem with y

Mar.18,2021

For

data, please refer to the vue official website ide/" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/style.
data: function () {

.
return {
  foo: 'bar'
}

}


it's done. You don't know what I mean. Here's the solution
< div id= "app" >
< input type= "text" v br model = "x" >

y: {{y}}


< / div >
< script >
new Vue ({

el: '-sharpapp',
  data: {
    z: 1,
    y: 1
  },
  computed: {
    x: {
    get () {
        return this.z
      },
      set (newValue) {
        this.z = newValue * 2
       this.y = newValue * 4
      }
}

}
})
< / script >

Menu