JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ko">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body class="container">
    <div id="main-app">
      <template v-for="(item, index) in message">
        <quiz v-for="(cont, key) in item" v-bind:quiz-inner="cont" v-bind:quiz-key="index"></quiz>
      </template>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

  </body>

</html>

Vue

// 스트링을 대문자화
   Vue.filter('capitalize', function(value) {
     if (!value) return ''
     value = value.toString()
     return value.toUpperCase()
   })

   // 퀴즈 컴포넌트 선언
   Vue.component('quiz', {
     template: `<div class="card border-primary mb-3" style="max-width: 20rem; " >
  <div class="card-header">{{quizKey | capitalize}}</div>
  <div class="card-body">
    <h4 class="card-title">{{quizInner.question}}</h4>
    <li class="card-text" v-for="option in quizInner.options">{{option == quizInner.answer ? option + ' (answer)' : option}}</li>
  </div>
</div>`,
     props: ['quizInner', 'quizKey']
   })

   var mainApp = new Vue({
     el: '#main-app',
     data: {
       message: 'You loaded this page on ' + new Date().toLocaleString()
     },
     created: function() {
       const self = this

       /** == AXIOS get으로 가져오기 == **/
       axios.get('https://support.oneskyapp.com/hc/en-us/article_attachments/202761727/example_2.json')
         .then(response => {
           // handle success
           console.log(response.data, this);
           this.message = response.data.quiz
         })
       /** ========================= **/
     }
   })