Bug: v-if reactive state not updating inside Nova custom tool (Inertia + Vue 3)

[Alexisgt01]

🐛 Bug: v-if reactive state not updating inside Nova custom tool (Inertia + Vue 3)

Code

// resources/js/tool.js
import Tool from './components/Tool.vue'
import Editor from '@tinymce/tinymce-vue'

Nova.booting((app) => {
  app.component('ticket-detail', Tool)
  app.component('editor', Editor)
})

<template>
  <div>
    <editor v-if="showEditor"></editor>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Editor from '@tinymce/tinymce-vue'

const props = defineProps({ panel: Object })
const showEditor = ref(false)

onMounted(() => {
  setTimeout(() => {
    console.log(props.panel.ticket, Editor)
    showEditor.value = true
  }, 2000)
})
</script>

Expected behavior

showEditor should become true after 2 seconds and display the <editor> component.

Actual behavior

showEditor stays false in template

Without showEditor : the console throws the following error:

TypeError: Cannot read properties of null (reading 'refs')

Environment

• Laravel 12
• Laravel Nova: 5.7
• Vue: 3.x (via Nova)
• Inertia: latest
• @tinymce/tinymce-vue: 4.0

Notes

• The same code works correctly in a standalone Vue 3 project.
• Inside Nova (Inertia context), the reactive state doesn’t update — it looks like onMounted runs before the Inertia DOM is fully ready.
• The error suggests TinyMCE tries to access this.$refs before the component is properly mounted within Nova’s dynamic panel lifecycle.

Possible cause

Nova’s internal Inertia + KeepAlive system might destroy or defer component refs before the TinyMCE editor finishes mounting, preventing the reactive v-if condition from ever updating.

Additional information

The issue occurs not only with @tinymce/tinymce-vue, but with any component imported from an external package.
Whenever a third-party Vue component is registered and rendered conditionally inside a Nova tool (using v-if), the reactive state never updates, and the component fails to mount properly.

[Alexisgt01]

It also seems that reactive properties such as ref or v-model do not behave correctly inside Nova’s Inertia context.
Two-way bindings (v-model) don’t update the value, even though the same code works fine in a standard Vue 3 environment.

Example:

<template>
  <div>
    <input v-model="message" placeholder="Type something..." />
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const message = ref('hello')

onMounted(() => {
  console.log('initial:', message.value)
  setTimeout(() => {
    message.value = 'updated!'
    console.log('after update:', message.value)
  }, 2000)
})
</script>

[crynobone]

Any reason why setTimeout() is used instead of nextTick()?

https://stackoverflow.com/a/63679561