Vue 3 data is not updating after change triggered in methods-CodePudding

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>

CodePudding user response：

Define method like this setMessage(params) { not like this setMessage: (params) => {

CodePudding user response：

Issue is in the template, specifically this part:

<h5>${ message }</h5>

Vue uses double curly braces e.g. {{message}} for text interpolation in templates

https://vuejs.org/guide/essentials/template-syntax.html

and what you're using is JS template literal syntax.