npm install vuex@next --save

import {
    createStore
} from 'vuex';

const stores = createStore({
    state: {
        counter: 0
    },
    mutations: {
        increment(state) {
            state.counter += 1;
        },
        decrement(state) {
            state.counter -= 1;
        }
    },
    actions: {
        increment({
            commit
        }) {
            commit('increment');
        },
        decrement({
            commit
        }) {
            commit('decrement');
        }
    }
});

export default stores;

require('./bootstrap');

// Import modules...
import {
    createApp,
    h
} from 'vue';
import {
    App as InertiaApp,
    plugin as InertiaPlugin
} from '@inertiajs/inertia-vue3';
import {
    InertiaProgress
} from '@inertiajs/progress';
import stores from './stores/stores';

const el = document.getElementById('app');

createApp({
        render: () =>
            h(InertiaApp, {
                initialPage: JSON.parse(el.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            }),
    })
    .mixin({
        methods: {
            route
        }
    })
    .use(InertiaPlugin)
    .use(stores)
    .mount(el);

InertiaProgress.init({
    color: '#4B5563'
});

<template>
  <div class="flex justify-center mt-8">
    <div class="flex items-center">
      <button @click="decrement()"
        class="text-white p-2 pl-5 pr-6 bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
      >
        Kurang
      </button>
      <div class="mr-2 ml-2">
        {{ counter }}
      </div>
      <button @click="increment()"
        class="text-white p-2 pl-5 pr-6 bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
      >
        Tambah
      </button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["counter"]),
  },
  methods:{
      ...mapActions(['increment','decrement']),
  }
};
</script>

<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->name('dashboard');

Route::get('/counter', function () {
    return Inertia::render('Counter');
})->name('counter');