v-on with no argument expects an object value

Question

I am new to Vue. So I gotta tell ya, what I am doing here is working, but I am also get a dev tools error.

[Vue warn]: v-on with no argument expects an object value.

Now, I get WHY it is telling me this, but when I try to fix it in a couple of ways, I get a number of errors. What I am wondering is how would I resolve this properly. I also want to stress what the code is doing IS working as expected on the frontend. Just not proper Vue I would like to resolve

TEMPLATE

<div v-if="message.type === 'message'">
  <chat-message v-on="playMessageNotificationSound()" 
                :message="message"/>
</div>
<div v-else-if="message.type === 'notification'">
  <div v-show="this.$store.state.notifications.enterLeave === 'true'">
    <chat-notification v-on="playNotificationSound()" :message="message" />
  </div>
</div>

SCRIPT

methods: {
  playMessageNotificationSound() {
    if (this.$store.state.notifications.messagesound === 'true' ) {  
      var audio = new Audio('https://chat-cdn.levelupchat.com/chat-sounds/whisper.mp3');
      audio.volume = 0.4;
      audio.play();
    }
  },
  playNotificationSound () {
    if (this.$store.state.notifications.enterLeaveSound === 'true' ) {    
      var audio = new Audio('https://chat-cdn.levelupchat.com/chat-sounds/message.mp3');
      audio.volume = 0.4;
      audio.play();
    }
  },

Answer 1

v-on is a directive to listen to DOM events and run some JavaScript when they’re triggered. You can't use it empty instead need to bind an event handler . For example

<button v-on:click="say('hi')">Say hi</button>

where

  methods: {
    say: function (message) {
      alert(message)
    }
  }

For more info : https://v2.vuejs.org/v2/guide/events.html#Listening-to-Events