Vue.jsでjsをimportをした際に読み取るまでundefinedになってしまう

Question

jsの設定ファイルなどをimportをした際に、読み取るまでundefinedになってしまうので、そうならないようするための良い方法はありますか？

例) test.vueからsettings.jsをimportして表示する。

settings.js

export default {
  baseUrl: 'https://test.com',
}

test.vue

<template>
  <div>{{ settings.baseUrl }}</div>
</template>

<script>
  import settings from '@/config/settings'
  
  export default {
    mounted(){
    },
  } 
</script>

↑だと、settings.baseUrlは定義されていませんとエラーが発生してしまいます。

これを回避するために、下記のようにしています。
test.vue

<template>
  <div>{{ load_settings.baseUrl }}</div>
</template>

<script>
  import settings from '@/config/settings'
  
  export default {
    computed:{
      load_settings:()=> settings || '', 
    },
  } 
</script>

これでエラーは回避できますが、load_settingsをcomputedで定義しなければなりません。そのままsettingsを使用できるようにしたいのですが良い方法はありますか？

Answer 1

読み取るまでundefinedになってしまうわけではなく、import したものをそのままVueのテンプレートに表示させることはできません！
Vueの管理下にデータを置いてあげる必要があるので、computedに入れるのはとてもいい選択だと思います。
自分なら↓みたいにすると思います！

<script>
  import settings from '@/config/settings'

  export default {
    computed:{
      // load_settings:()=> settings || '', 
      settings: () => settings
      // もしかしたら↓の書き方でもいけるかも(未検証)
      // settings: settings
    }
  } 
</script>

↑の状態ならテンプレートからsettingsとして扱えます。

Answer 2

すでに解決済みだったらすみません
この場合おそらくですが以下のように書くのが適切ではないかと思います

<template>
  <div>{{ baseUrl }}</div>
</template>

<script>
import settings from '@/config/settings'

export default {
  data() {
    return {
      baseUrl: ''
    };
  },
  created() {
    this.$data.baseUrl = settings.baseUrl
  }
};
</script>

DOMのレンダリングはcreated()の後に行われるはずなので、読み込みが必要な値を設定するときはその段階で行うのがいいのかなと思います
参考：https://swallow-incubate.com/archives/blog/20190422/