Генератор случайных цитат

<div id="app">
  <div class="app__lang">
    <button @click="handleRu" :class="{active: !lang}">ru</button> | <button @click="handleEn" :class="{active: lang}">en</button>
  </div>
  <p class="app__title">
    <span v-if="!lang">Read and think about it!</span>
    <span v-else>Прочитай и задумайся!</span>
  </p>
  <p class="app__quote">{{obj.quote}}</p>
  <p v-if="obj.author" class="app__author">{{obj.author}}</p>
  <p v-else class="app__author">
    <span v-if="!lang">Author unknown</span>
    <span v-else>Автор не известен</span>
  </p>
  <button class="app__btn" @click="getQuote">
    <span v-if="!lang">Next quote</span>
    <span v-else>Следующая цитата</span>
  </button>
</div>

#app {
  display: grid;
  gap: 30px 0;
  width: min(768px, 100%);
  padding: 50px;
  background-color: #fff;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 5px 15px hsla(0, 0%, 0%, 0.25);
}
.app__lang {
  display: flex;
  justify-content: center;
  gap: 0 20px;
}
.app__lang button {
  opacity: 0.5;
  text-transform: uppercase;
  cursor: not-allowed;
}
.app__lang button.active {
  opacity: 1;
  font-weight: 700;
  cursor: pointer;
}
.app__title {
  color: #A6ACAF;
  font-size: 24px;
  font-weight: 500;
}
.app__quote {
  font-size: 24px;
}
.app__author {
  font-family: Lora, serif;
  font-size: 24px;
  font-style: italic;
}
.app__author::before {
  content: "- ";
}
.app__author::after {
  content: " -";
}
.app__btn {
  justify-self: center;
  padding: 15px 30px;
  color: #fff;
  background-color: #27AE60;
  border-radius: 10px;
  box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.25);
}

const {createApp, ref, onMounted} = Vue
createApp({
    setup(){
        let obj = ref({
            quote: '',
            author: ''
        })	
        let lang = ref(true) // ru - true, en - false
        async function getQuote () { 
			const response = await fetch('/api/quotes.json')
			const data = await response.json()
			const randomIndex = Math.floor(Math.random() * data.quotes.length)
			const quote = data.quotes[randomIndex]
			if(lang.value === true){obj.value = quote.ru}
			else obj.value = quote.en			
		}
		const handleRu = ()=> {
			if(lang.value) return
			lang.value = true
			getQuote()
		}
		const handleEn = ()=> {
			if(!lang.value) return
			lang.value = false
			getQuote()
		}
		onMounted(()=>{
			getQuote()
		})
        return{obj, lang, getQuote, handleRu, handleEn}
    }
}).mount('#app')

{
  "quotes": [
    {
      "en": {
        "quote": "Life isn’t about getting and having, it’s about giving and being.",
        "author": "Kevin Kruse"
      },
      "ru": {
        "quote": "Жизнь не в том, чтобы получать и иметь, а в том, чтобы отдавать и быть.",
        "author": "Кевин Круз"
      }
    },
    {
      "en": {
        "quote": "Whatever the mind of man can conceive and believe, it can achieve.",
        "author": "Napoleon Hill"
      },
      "ru": {
        "quote": "Все, что человеческий разум может представить и во что может поверить, того он может и достичь.",
        "author": "Наполеон Хилл"
      }
    },
    {
      "en": {
        "quote": "Strive not to be a success, but rather to be of value.",
        "author": "Albert Einstein"
      },
      "ru": {
        "quote": "Стремитесь не к успеху, а к тому, чтобы быть ценным.",
        "author": "Альберт Эйнштейн"
      }
    }
  ]
}