Access variable in vue custom renderer

I am trying to implement te custom renderer of this Vue Word Cloud component in Laravel:
https://github.com/SeregPie/VueWordCloud

I first prepare my word array using php (working):

        @php
            $tags = App\Models\Tag::withCount('songs')->orderBy("songs_count", "desc")->take(50)->get();
            $words = "";
            foreach($tags as $tag)
            {
                $count = $tag->countSongs();
                $words .= "['$tag->name', $count],";
            }
        @endphp

Then I include the word cloud (this is working)

    <vue-word-cloud
        style="
            height: 480px;
            width: 80%;
            margin: 0 auto;
        "
        :words="[{{ $words }}]"
        :color="([, weight]) => weight > 40 ? 'Red' : weight > 30 ? 'Orange' : weight > 20 ? 'Seagreen' : weight > 10 ? 'White' : weight > 5 ? 'LightSkyBlue ' : 'White'"
        font-family="Nunito"
    >   
    
    </vue-word-cloud>

But when I try to use the custom renderer like this: (I need this to wrap a link around every word)

    <vue-word-cloud
        style="
            height: 480px;
            width: 80%;
            margin: 0 auto;
        "
        :words="[{{ $words }}]"
        :color="([, weight]) => weight > 40 ? 'Red' : weight > 30 ? 'Orange' : weight > 20 ? 'Seagreen' : weight > 10 ? 'White' : weight > 5 ? 'LightSkyBlue ' : 'White'"
        font-family="Nunito"
    >   
      <template slot-scope="{text, weight, word}">
        <div>
          @{{ text }} <!-- this is not working, I need a link around the word here -->
        </div>
      </template>       
    </vue-word-cloud>

It produces the following error:

[Vue warn]: Property "text" was accessed during render but is not defined on instance. 

I am by no means a VUE.js expert and maybe I am missing something trivial.
How can I access the custom renderer’s "word" variable

>Solution :

The slot-scope syntax is deprecated since v2.6. Use v-slot instead:

<template v-slot="{text, weight, word}">