I am encountering an issue in Laravel while attempting to set up a Vue instance for tabs. Currently, only Tab 1 and Tab 2 are displayed without any content, and the tabs themselves are not clickable links.
Could this problem be related to how I am calling Vue? Interestingly, I have Vue natively installed on Laravel 5.8 and it is functioning properly elsewhere.
<div id="tabs" class="container">
<div class="tabs">
<a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>
<a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>
</div>
<div class="content">
<div v-if="activetab === 1" class="tabcontent">
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Type</th>
<th>Available At:</th>
</tr>
</thead>
<tbody>
@foreach ($result as $id => $item)
<tr>
<td>{{ $id }}</td>
@foreach($item as $subitem)
@if($subitem->name == "Task Title")
<td>{{ $subitem->task_comment }}</td>
<td>{{ $subitem->task_typet_id }}</td>
<td>{{ $subitem->available_at }}</td>
@endif
@endforeach
</tr>
@endforeach
</tbody>
</table>
</div>
<div v-if="activetab === 2" class="tabcontent">
TEST
</div>
</div>
</div>
<script>
export default {
el: '#tabs',
data: { activetab: 1 },
};
</script>