How to fetch and display API data using Vue and RapidAPI?

Other Questions RapidAPI
1

I’m experimenting with Vue.js and RapidAPI, attempting to fetch and show data from an API via the JavaScript Fetch API. Unfortunately, when I execute my code, the only result I get is an empty array (i.e., ). Here’s a snippet of my code:

<template>
  <div>
    <div>{{ jokeData }}</div>
  </div>
</template>

<script>
let joke = [];
fetch('https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random', {
  method: 'GET',
  headers: {
    'x-rapidapi-host': 'matchilling-chuck-norris-jokes-v1.p.rapidapi.com',
    'x-rapidapi-key': '***'
  }
})
  .then(res => res.json())
  .then(result => {
    joke = result;
  })
  .catch(error => {
    console.error(error);
  });

export default {
  data() {
    return {
      jokeData: joke
    };
  }
};
</script>

I also attempted the following:

let joke; 
fresh('https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random', {...}

However, I only received [object Promise] instead of the expected output. What am I missing?