Vue directive for highlight multiple istances of a word

yarn add vue-highlighter

<template>
  <p v-highlight:word="'Alessandra'">I love Alessandra</p>
</template>

<script>
import vueHighlighter from 'vue-highlighter'

export default {
  directives: {
    vueHighlighter
  }
}
</script>

<template>
  <p v-highlight="{ word: word, live: live }" >{{ text }}</p>
</template>

<script>
import vueHighlighter from 'vue-highlighter'

export default {
  data: () => {
    return {
      text: 'I love Alessandra , AlessandraGiulio',
      word: 'Alessandra',
      live: false,
    }
  },
  directives: {
    vueHighlighter
  }
}
</script>

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    live: true,
  }
}

data: () => {
  return {
    text: 'I love Alessandra',
    word: ['I', 'Alessandra'],
    live: true,
  }
}

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    live: true,
  }
}

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      color: '#ffddee'
    }
  }
}

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      bgColor: '#ffddee'
    }
  }
}

data: () => {
  return {
    text: 'I love Alessandra',
    word: 'Alessandra',
    style: {
      padding: '4rem 5%'
    }
  }
}