Vue3 undefined error

[acovrig]

Describe the bug
When trying the vue3 example in the Readme:

import { onMounted } from 'vue';

export default defineComponent({
  channels: {
    ChatChannel: {
      connected() {
        console.log('connected');
      },
      rejected() {
        console.log('rejected');
      },
      received(data) {},
      disconnected() {},
    },
  },
  setup() {
    onMounted(() => {
      this.$cable.subscribe({
        channel: "ChatChannel",
      });
    });
  },
});

I get ReferenceError: defineComponent is not defined, so if I change the first line to:
import { onMounted, defineComponent } from 'vue';

I then get Cannot read properties of undefined (reading '$cable') .

I was able to get it to work using this:

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  channels: {
    ChatChannel: {
      connected() {
        console.log('connected');
      },
      rejected() {
        console.log('rejected');
      },
      received(data) { console.log(data); },
      disconnected() { console.log('disconnected'); },
    },
  },
  setup() {},
  mounted() {
    this.$cable.subscribe({
      channel: "ChatChannel",
    });
  },
});
</script>

Am I missing something or should the Readme be updated?

Plugin version (please complete the following information):

versions: {
  "actioncable-vue": "^3.0.4",
  "vue": "^3.4.29"
}

[mclintprojects]

@acovrig Thanks for flagging. This is a README issue, and I'll update it shortly.

[joaoVictorDeAndrade]

Same here!

[mclintprojects]

@joaoVictorDeAndrade @acovrig Are you using Nuxt or just Vue? Have you found a solution yet? ActionCableVue sets a Vue globalProperty for $scable, so you should be able to do this.$cable.

Context: https://blog.logrocket.com/vue-js-globalproperties/

[adamreisnz]

Has anyone figured out how to run this in Vue3 with composition API? Is there a composable that can be imported or something similar? The readme still seems out of date.