'Vue 3 data is not updating after change triggered in methods

I am trying to understand Vue 3 data management for Shopify Theme. After going through my old code which is based on Vue 2, I cannot update the data object by changing value in methods function.

Below is the snippet with issue.

Vue.createApp({
  delimiters: ['${', '}'],//for NO CONFLICT with liquid theme
  data: () => {
    return {
      message: 'Hello Vue'
    }
  }, //data ends
  methods: {
    setMessage: (params) => {
      //setting new message
      this.message = params;
      
    }
  }, //methods ends
}).mount('#app1')
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

<div id="app1">
  <h5>${ message }</h5>
  <button v-on:click="setMessage('new message')">Submit</button>
</div>
vue.jsshopifyvuejs3


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions