Deep Updates

There are times where the content of a element can change without causing the component instance, on which directives are registered, to update.

The following example illustrates this issue:

Hello World

In such causes, the deep modifier can be used to deeply track mutations to character data.

Deep.vue

<template>
  <p v-highlight.deep="/[aeiou]/ig">
    <RotatingGreeting>
      World
    </RotatingGreeting>
  </p>
</template>

RotatingGreeting.vue

<script lang="ts" setup>
import { rand, useIntervalFn } from '@vueuse/core';
import { ref } from 'vue';

const interval = 1000 * 2;
const greetings = ['Hello', 'Hi', 'Yo!', 'Hey', 'Hola', 'Bonjour', 'Salute!'];
const greeting = ref<string | undefined>('Hello');

useIntervalFn(() => {
  greeting.value = greetings[rand(0, greetings.length - 1)];
}, interval);
</script>

<template>
  {{ greeting }} <slot></slot>
</template>

Hello World