La razón por la que su código no funciona como se esperaba es porque this dentro de la función de datos no es la instancia del componente, es el contexto del componente.

Si desea crear una propiedad reactiva llamada list en la instancia, debe colocar una propiedad de list con un valor que no sea undefined en el objeto devuelto por la función de datos.

Tu ejemplo, arreglado:

 new Vue({ el: '#app', data: { count: 1, list: 5 }, mounted() { console.log(this.count); this.count = 5; this.list = 6; }, methods: { say() { this.list = 7 } } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <div id="app"> Count is: {{ count }}<br> List is: {{ list }}<br> <button @click="say"> hello </button> </div>

Ahora, si cambia this.list a cualquier otra cosa en cualquier gancho de método o componente, la plantilla se actualizará en consecuencia.

Obviamente, la función de datos no tiene que ser una función de flecha.

 data: function() { return { count: 1, list: 5 } }

... también funciona. Otra nota es que los datos también pueden ser un objeto. En tu caso

 data: { count: 1, list: 5 }

...trabajaría. Sin embargo, no se recomienda esta sintaxis, ya que varias instancias del mismo componente compartirían los mismos datos reactivos, lo que, en la mayoría de los casos, no es el comportamiento esperado.

Su sintaxis era incorrecta, eche un vistazo al siguiente fragmento:

 new Vue({ el: "#demo", data() { return { list: [1,2,3,4], } }, methods:{ say(){ this.list.push(this.list.length + 1) } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-for="(item, i) in list" :key="i"> {{ item }} </div> <button @click="say"> hello </button> </div>