Single file component <script> section

Follow these steps to create the <script> section of the single file component:

1. Create a new file called RandomCat.vue in the src/components folder and open it.
2. Import the getHttp function from the fetchApi wrapper we made in the 'Creating a wrapper for the Fetch API as an HTTP client' recipe:
   

import { getHttp } from '../http/fetchApi';

3. Asynchronously import the MaterialButton and MaterialCardBox components in the component property:

components: {
  MaterialButton: () => import('./MaterialButton.vue'),
  MaterialCardBox: () => import('./MaterialCardBox.vue'),
},

4. In the data property, we need to create a new data value named kittyImage, which will be by default an empty string:

data: () => ({
  kittyImage: '',
}),

5. In the methods property, we need to create the getImage method, which will fetch the image as a Blob and return it as a URL.createObjectURL. We also need to create...