vuex - vue3 多言語サイト、計算されたプロパティ、動的コンポーネント、

Question

vuex + vue-router + 動的コンポーネントを使用して、Web サイトのヘッダーとフッターを表示します。vuex を介して vue-router から現在のルートを取得し、ヘッダーとフッターがある App.vue にデータを「注入」します。すべてのページの正しいルートを console.log できます。

app.vue マークアップは次のようになります。

<component :is="selectedHeader"></component>
   <router-view></router-view>
<component :is="selectedFooter"></component>

ここで、正しいコンポーネントを表示するために、計算されたプロパティ selectedFooter と selectedHeader を使用します。

  computed: {
    
    // eslint-disable-next-line vue/return-in-computed-property
    selectedHeader() {    
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.currentRoute = this.$store.getters.getRoute
     
      if(this.currentRoute) {

      if(this.currentRoute.includes("de")) {          
          return "de-header";     
      }

      if(this.currentRoute.includes("en")) {
          return "en-header";
      }

      if(this.currentRoute.includes("es")) {          
          return "es-header";     
      }

      
    }},

    // eslint-disable-next-line vue/return-in-computed-property
    selectedFooter() {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.currentRoute = this.$store.getters.getRoute
     
      if(this.currentRoute) {

       if(this.currentRoute.includes("de")) {          
          return "de-footer";     
      }  

      if(this.currentRoute.includes("en")) {
          return "en-footer";
      }

      else if(this.currentRoute.includes("es")) {          
          return "es-footer";     
      }
     
    }},

基本的には機能しますが、計算されたプロパティを正しく使用していないため、すでに副作用が発生していると思います。たとえば、ストアからのルートデータが間違いなく正しい場合でも、1 つのルートが間違った言語ヘッダーに表示されますか?

ウォッチャーを使用した方が良いと思いますが、どうですか？