Translation return key and not value after refreshing page about laravel-vue-i18n HOT 4 CLOSED

<template>
  <div class="w-10/12 mx-auto pt-10">
      <button class="px-3 py-2 my-2 border border-black rounded-lg mr-2 bg-red-500 text-white disabled:opacity-40" disabled id="btnDelete" v-on:click="onBtDelete">{{ $t("delete") }}</button>
      <button class="px-3 py-2 my-2 border border-black rounded-lg bg-blue-600 text-white disabled:opacity-40" disabled id="btnView" v-on:click="onBtView">{{ $t("view") }}</button>
      <ag-grid-vue
      class="h-[60vh] ag-theme-quartz"
      :rowData="rowData"
      :columnDefs="this.colDefs"
      :editType="editType"
      @grid-ready="onGridReady"
      @row-selected="onRowSelected"
      @rowEditingStopped="rowEditingStopped"
      :defaultColDef="defaultColDef"
      :rowSelection="'single'"
      ></ag-grid-vue>
  </div>
</template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // Theme
import { AgGridVue } from "ag-grid-vue3"; // Vue Grid Logic
import { useRouter } from 'vue-router'
import { trans } from 'laravel-vue-i18n'

window.timeOperation = function timeOperation(name, operation) {
  aggCallCount = 0;
compareCallCount = 0;
filterCallCount = 0;
var start = new Date().getTime();
operation();
var end = new Date().getTime();
console.log(
  name +
    ' finished in ' +
    (end - start) +
    'ms, aggCallCount = ' +
    aggCallCount +
    ', compareCallCount = ' +
    compareCallCount +
    ', filterCallCount = ' +
    filterCallCount
);
};
var aggCallCount = 0;

var compareCallCount = 0;

var filterCallCount = 0;
export default {
data(){
  return{
    header:'',
    colDefs: [
          { field: "id", editable: false, checkboxSelection: true},
          { field: "resp_id", headerName: trans("entry.responsible"), editable: false },
          { field: "company_name", headerName: 'Company name', filter: true},
          { field: "visit_subject",headerName: 'visit subject', filter: true},
          { field: "contact",headerName: 'Contact interne', filter: true },
          { field: "entry_date", headerName: 'Entry Date'},
          { field: "exit_date", headerName: 'Exit date'},
      ],
  }
},
components: {
  AgGridVue, // Add AG Grid Vue3 component
},
methods: {
  rowEditingStopped(event) {
    var data = event.data;
    delete data['resp_id'];
    axios.patch(`api/groupes/${data.id}`,data).then((res) => {
      console.log(res);
    })
  }
},
setup() {
  const router = useRouter();
  const rowData = ref([]);
  // Row Data: The data to be displayed.
  axios.get(`api/groupes`).then((res) => {
      rowData.value = res.data.data;
  })

  const gridApi = ref();

  const onGridReady = (params) => {
    gridApi.value = params.api;
  };
  
  const onBtDelete =() =>{
    // get the first child of the
      var selectedRow = gridApi.value.getSelectedRows();

      if (!selectedRow || selectedRow.length === 0) {
          console.log('No rows selected!');
          return;
      }

      selectedRow.forEach(element => {
        axios.delete(`api/groupes/${element.id}`).then(() => {
          timeOperation('Delete', () => {
            gridApi.value.applyTransaction({ remove: selectedRow });
          });
        }).catch((error) => {
          console.log(error.response.data);
        });
      });
  };

  const onBtView =()=>{
    var selectedRow = gridApi.value.getSelectedRows();
    if (selectedRow.length === 1) {
      var id = selectedRow[0].id;
      router.push({
          name: 'details',
          query: {
              group_id: id
          }
      })
    }else{
      console.log('too much row selected');
    }
  };

  const onRowSelected = () => {
    var selectedRow = gridApi.value.getSelectedRows();
    if (!selectedRow || selectedRow.length === 0) {
        document.getElementById('btnDelete').disabled = true;
        document.getElementById('btnView').disabled = true;
    }else{
      document.getElementById('btnDelete').disabled = false;
        document.getElementById('btnView').disabled = false;
    }
  };
// Column Definitions: Defines & controls grid columns.
  return {
      rowData,
      defaultColDef: {
          editable: true,
      },
      gridApi,
      editType: 'fullRow',
      onGridReady,
      onBtDelete,
      onRowSelected,
      onBtView,
  };
},
};
</script>