vue function dont work when browser is refreshed

Question

my vue functions dont work when i manually refresh browser page. but works when i navigate from another vue component to this component it works fine. Please below is my code

UPDATE:

im using router-view within laravel application

@extends('layouts.starter')    
    <router-view> </router-view>
@endsection()


<template>
    <select class="form-control select" v-model="form.id" @change="getFee" required>
   <option disabled value="">Please select Class</option>
   <option v-for="level in levels" :value="level.id" :key="level.id">
      {{ level.name }}
   </option>
</select>

 <div class="form-group">
     <label>Fee </label>
     <input class="form-control" disabled type="number" v-model="form.fee">
 </div>
</template>
<script>
import useLevels from "../../composables/Levels";

export default {
  setup() {
    const {getlevels } = useLevels();

onMounted(getLevels);
 
const form = reactive({
    id: "",
    fee: '',
});

function getFee() {
   form.fee = localStorage.getItem(form.id + "_fee") || 0;
 }
}}
</script>

Answer 1

i solved it by removing the select class on the select tag. Someone might find it helpful

new code

    <template>
         <select class="form-control" v-model="form.id" @change="getFee" required>
            <option disabled value="">Please select Class</option>
            <option v-for="level in levels" :value="level.id" :key="level.id">
              {{ level.name }}
          </option>
</select>

old code

<template>
             <select class="form-control select" v-model="form.id" @change="getFee" required>
                <option disabled value="">Please select Class</option>
                <option v-for="level in levels" :value="level.id" :key="level.id">
                  {{ level.name }}
              </option>
    </select>