I want to change the bt.name_en, bt.text_en and bt.date_en as the LocalStorage (const local = localStorage.getItem("inLan");) changes.

If the const local (const local = localStorage.getItem("inLan"); is equal to name_jp, then the name, text and date change to "JP" (bt.name_jp, bt.text_jp and bt.date_jp) as well. How can I do this effectively and correctly?

<template>
  <div class="about">
    <Header />
      <div class="line">
        <ul>
          <li v-for="bt in list" :key="bt.id">
            <div class="line-cont">
              <h2 class="dateX" >{{ bt.date_en }}</h2>
              <h1>{{ bt.name_en }}</h1>
              <p>{{ bt.text_en }}</p>
              <div class="divm">
                <img class="img" :src="bt.image" alt="">
              </div>
            </div>
          </li>
        </ul>
      </div>
    <Footer />
  </div>
</template>

<script>
import { computed } from "vue";
import { l } from "@/modules/languages";
import useAb from "@/modules/About";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "About",
  components: {
    Header,
    Footer,
  },
  setup() {
    const cards = useAb();
    const list = computed(() => cards.state.abouts);
    const local = localStorage.getItem("inLan");

    return {
      l,
      list,
      local,
    };
  },
};
</script>