Inertia.js / Vue Error

Hello

I'm learning inertia and I'm creating my first app. I'm creating a simple component that read-write tweets and display them.

Tweets/Index.vue

<template>
    <app-layout>
        <template #header>
            <h2 class="h4 font-weight-bold">Tweets</h2>
        </template>

        <div class="row">
            <div class="col-md-8">
                <div
                    class="py-4 d-flex align-items-center justify-content-between"
                >
                    <input
                        type="text"
                        class="mr-2 form-control"
                        v-model="tweetForm.body"
                        ref="tweetBox"
                    />
                    <jet-button @click="sendTweet">Tweet</jet-button>
                   
                </div>
                <div class="mt-4">
                    <div
                        v-if="tweets.length"
                        v-for="tweet in tweets"
                        :key="tweet.id"
                        class="px-3 py-2 mb-3 border rounded bg-dark"
                    >
                        <div class="mb-2 text-light">{{ tweet.body }}</div>
                        <div
                            class="d-flex align-items-center justify-content-between"
                        >
                            <span class="text-sm-left text-muted"
                                >by @{{ tweet.creator }}</span
                            >
                            <div class="text-sm-left text-muted">
                                {{ tweet.published_at }}
                            </div>
                        </div>
                    </div>

                    <div v-else>
                            <h6 class="text-sm-left text-muted">
                                You Haven't tweeted yet?
                                <a
                                    class="text-decoration-none"
                                    @click.prevent="$refs.tweetBox.focus"
                                    href="#"
                                    >share your first thought</a
                                >
                            </h6>
                        </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="py-4">
                    <h4 class="text-center">Trendings</h4>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout";
import JetButton from "@/Jetstream/Button";

export default {
    props: ["tweets"],

    data() {
        return {
            tweetForm: this.$inertia.form({
                body: ""
            })
        };
    },

    methods: {
        sendTweet() {
            this.tweetForm.post(route("tweets.store"), {
                errorBag: "sendTweet",
                preserveScroll: true,
                onSuccess: () => this.tweetForm.reset()
            });
        }
    },

    components: {
        AppLayout,
        JetButton
    }
};
</script>

controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;

class TweetsController extends Controller
{
    public function index(Request $request)
    {

        return Inertia::render('Tweets/Index', [
            'tweets' => $request->user()->tweets
        ]);
    }

    public function store(Request $request)
    {
        $valid = $this->validate($request, [
            'body' => 'required|max:150'
        ]);

        $request->user()->tweets()->create($valid);

        return Redirect::route('tweets.index');
    }
}

Now when I create new tweet it should re-render the component and display new tweet in no time. but I get this error ncaught (in promise) TypeError: Cannot read property 'insertBefore' of null which basically is here:

insert: (child, parent, anchor) => {
        parent.insertBefore(child, anchor || null);
    },

what is wrong with my code?