Why UI is not updaded ( reactive ) with the new value?

[biapar]

I create a local variable and input data from a textfield.
The value is stored into the variable ( if I click on the button to show snackbar, I see the value in the message ), but the UI is not updated.

Code:

               <b-field label="Name">
                 <b-input id="nome" v-model="message" placeholder="add your name"></b-input>
               </b-field>
               {{ this.message }} 
               <button class="button is-primary" @click="snackbar">
                  Launch snackbar (default)
               </button>

Declaration:

<script>
   import SystemInformation from './LandingPage/SystemInformation'
 
   export default {
     name: 'landing-page',
     components: { SystemInformation },
     data: {
       message: ''
     },
     methods: {
       open (link) {
         this.$electron.shell.openExternal(link)
       },
       snackbar () {
         this.$snackbar.open('Default, positioned bottom-right with a green OK button ' + this.message)
       }
     }
   }
</script>

Route Name:
landing-page
Vue.js:
2.5.17
Electron:
2.0.8
Node:
8.9.3
Platform:
win32

Thanks

[test137E29B]

I'm pretty sure that
{ this.$snackbar.open('Default, positioned bottom-right with a green OK button ' + this.message) }

To access from a method, the data, you need to use this.$data.message

[biapar]

@test137E29B in the snackbar it works. The problem is here:

 </b-field>
          {{ this.message }
```} 

[XanderLuciano]

If you are using text interpolation with the mustache syntax you don't need to use this.

{{ message }}

I don't think that would cause it to break, but might be worth trying. Also could you try using the Vue Devtools extension to check that the data is infact being updated on the component. I'm not seeing anything that would cause it not to be updated in the UI.

I created a quick test on codepen to demonstrate: https://codepen.io/XanderLuciano/pen/MqOOmK?editors=1010