Я хотел бы создать вкладку с использованием vue и bulma, но получаю следующую ошибку:

ошибка: openTab определен, но никогда не использовался (no-unused-vars) в

код:

<template>
<div>
  <div class="tabs is-centered">
    <ul>
      <li class="tab is-active" onclick="openTab(e,'adult')"><a>Adult</a></li>
      <li class="tab" onclick="openTab(e,'card')"><a>Card</a></li>
      <li class="tab" onclick="openTab(e,'food')"><a>Food</a></li>
    </ul>
  </div>

    <div id="adult" class="content-tab">
        <img :src="require(`../../static/dst/${parentData.file_name}`)">
            <div  v-bind:style="{ color: `${parentData.font_color}`}">
                    {{parentData.info_text}}<br>
                    {{parentData.rate_adult}}{{parentData.part_name}}<br>
                    {{parentData.rate_part}}
            </div>
    </div>

    <div id="card" class="content-tab" style="display: none">
        <div :style="{ color: `${parentData.card_color}`}">
                {{parentData.card_text}}
        </div>
    </div>

    <div id="food" class="content-tab" style="display: none">
        {{parentData.class_name}}
    </div>
</div>
</template>

<script>
     export default {
         name: 'Child',
         props: ['parentData'],
         
     openTab(e, tabName) {
             var i, x, tablinks;
             x = document.getElementsByClassName("content-tab");
             for (i = 0; i < x.length; i++) {
                 x[i].style.display = "none";
             }
             tablinks = document.getElementsByClassName("tab");
             for (i = 0; i < x.length; i++) {
                 tablinks[i].className = tablinks[i].className.replace(" is-active", "");
             }
             document.getElementById(tabName).style.display = "block";
             e.currentTarget.className += " is-active";
     }
     }
</script>

Я хочу найти ответ на эту проблему.

Tap функция не применяется.

Процесс:

1. Загрузите изображение
2. Вернуть json содержимое
3. Проверить нажатием

Подскажите, в чем ошибка?