Accessing the Vue instance inside a component in Laravel Inertia

Question

I am trying to parse a dynamic HTML with interpoltion inside them inside a Vue component in Inertia. My code looks something like below:

<template>
   <div v-if="parsed" v-html="parsed"></div>
</template>

...

export default {
   data(): return {
      html: null,
      name: null,
      parsed: null,
   },
   
   mounted() {      
      this.name = "John"; // I got this from the API
      this.html = "<h1>Hi, {{this.name}}!</h1>";
      this.parse();
   },

   methods: {
      parse() {
         this.parsed = Vue.compile(html);
      }
   }
}

The error I'm getting is:

[Vue warn]: Error in v-on handler: "ReferenceError: Vue is not defined"

My question is, how do I access the underlying Vue object inside the component. Thanks!

Answer 1

Check the cdn or js file version you have given.