Анимация в компоненте Vue с использованием Jquery

Question

У меня есть три отдельные вкладки в приложении SPA. Я хочу, чтобы содержимое вкладки анимировало прокрутку влево в моем компоненте Vue. Пока что не повезло.

Я хочу, чтобы пользователь нажимал на вкладку вверху страницы, содержимое этой вкладки анимировало прокрутку влево, а затем отображало содержимое этой вкладки. .

Я бездельничал, комментируя и раскомментируя строки, но пока, когда я нажимаю кнопку вкладки, анимация отсутствует. jQuery установлено (я проверил папку node_modules) в моем приложении Laravel.

Что я делаю не так?

<template>
<div>
        <ul class="flex mb-4 mt-0 border-b border-gray-400">
            <li v-for="(tab, index) in tabs" class="px-4 py-2 bg-white" :class="{'border border-b-0 rounded-t-lg': tab == activeTab}">

                <button id="tabbutton" :class="{ 'font-bold': tab == activeTab }" v-text="tab.title" role="tab" @click="scroll(tab)"></button>

            </li>
        </ul>
    <div id="content">
    <tab title="Documents">
        Docouments go here
    </tab>

    <tab title="Leadership">
        Leadership goes here
    </tab>

    <tab title="Documents">
        The general page goes here
    </tab>


    </div>
</div>
</template>

<script>
    import Tab from './Tab.vue';
    export default {
        components: {Tab},
        data() {
            return {
                activeTab: null,
                tabs: [],


            }
        },

        methods: {
            scroll(tab) {
                    $('html, body').animate({scrollRight: 400}, 800);

                // this.activeTab = tab


            }
        },

        mounted() {
            this.tabs = this.$children;

            this.activeTab = this.tabs[0];
        },

        watch: {
            activeTab(activeTab) {
                this.tabs.map(tab => tab.show = tab == activeTab)
            }
        }
    }
</script>