v-on:click="reverseMessage' is not working

What you have shared is perfectly fine; assuming you are compiling using Laravel Mix, do you have a script tag on the Blade template?

<script src="/js/app.js"></script>

@tykus There is no script tag on my blade file. I am just compiling it down with npm run dev

i havent include any script file on my blade file and i can display the message data from the Vue component that i have set on my app.js file. At the bottom of app.js file, spark by default inserted this script

var app = new Vue({
    mixins: [require('spark')]
});

In short the two way data binding is not working. And i have no idea why. @tykus

i can display the message data from the Vue component that i have set on my app.js file

I don't use Spark; is the compiled script also injected automatically like with vue-cli projects?

Otherwise, your Spark Vue app will exist on a separate Vue instance since you are creating app1 as a new Vue({...}) and binding it on a different element.

data must be returned , or it won't refresh when you change them.

try :

data () {

    return {

        message : 'your word ',
    
    }

}

@MaverickChan Thankyou for your answer but i dont understand your answer, where should i place that? I am trying to use a basic vue event call. and thats not working. I can access my vue instance data but two way data binding is not working.

@MaverickChan that is not true except for Vue component instances; a new Vue instance can have a data object

@tykus i am unable to trigger a click event.

@abudo from where - there is a lack of useful information? Where have you created the second Vue instance app1; how is it being added to the Blade template?

@tykus my Vue instance has been created in App.js file. It is automatically injected into the Blade template via 'npm run dev' command. Thats why i am able to display different data(message data) for the different instances but the click event is not working or two way data binding.

If that was not automatically injected in the Blade template then it shouldn't able to display the messages of each instance right, but it shows the messages data but events arent working and there is no console error.

If that was not automatically injected in the Blade template then it shouldn't able to display the messages of each instance right,

Don't know that for sure. Why don't you share the Blade file and the App.js file?

@tykus Cool. I can share those files right after 13 hours from now. I really appreciate for your help and concerns. I hope you will take a look at it.

@tykus FYI my blade file is really simple. It includes html and this code

blade.php

<div id="app1">
  <p> @{{ message }} </p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

When i update the message data from my app.js, and after compiling, i can see the updated data on the browser but the Click event, ins't working.

app.js

var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'Hello Vue.js! What the heck.I am tired'
  },
  methods: {
    reverseMessage: function () {
      alert('called')
      this.message = this.message.split('').reverse().join('')
    }
  }
})

I even tried a simple text box to see two way data binding, and that doesnt work either. It only loads the Vue instance data one time.

@tykus

app.js file

/*
 |--------------------------------------------------------------------------
 | Laravel Spark Bootstrap
 |--------------------------------------------------------------------------
 |
 | First, we will load all of the "core" dependencies for Spark which are
 | libraries such as Vue and jQuery. This also loads the Spark helpers
 | for things such as HTTP calls, forms, and form validation errors.
 |
 | Next, we'll create the root Vue application for Spark. This will start
 | the entire application and attach it to the DOM. Of course, you may
 | customize this script as you desire and load your own components.
 |
 */

require('spark-bootstrap');

require('./components/bootstrap');

//=================== Training =====================


var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'Hello Vue.js! What the heck.I am tired'
  },
  methods: {
    reverseMessage: function () {
      alert('called')
      this.message = this.message.split('').reverse().join('')
    }
  }
})



var app = new Vue({
    mixins: [require('spark')]
});

@tykus the interesting thing is that, i cant add Vue Library directly into my blade as it throws an error. What is going on here is the 'npm run dev' automatically inject data(vue data) into the blade one time but there is no two data binding or events trigger i.e v-on:click on any button.

I dont know what to do now.

@ejdelmonico any idea ?

@biishmar can you please help me in this issue. I am really exhausted

@abudo

I think message is coming from laravel not vuejs, cuz if u use @, thats uses by laravel not javascript framework, what kind of error u getting when u call this app.js from blade?