Vuetify.jsを用いてブレイクポイント毎にGoogle Mapの高さを動的に変更したい

前提・実現したいこと

こんにちは。お世話になります。
Nuxt.js環境下でVuetifyを使用しております。
トップページの中にGoogle Mapを埋め込んでいるのですが、
Vuetifyのブレイクポイントに応じてGoogle Mapの大きさを変更したいです。

発生している問題・エラーメッセージ

以下の記事を参考に「該当のソースコード」欄のように記述したのですが、
そもそもトップページにGoogle Mapが表示されません。

https://qiita.com/HorikawaTokiya/items/cf2729f7510e773513a9

該当のソースコード

Vuetify
1<template>
2  <v-app>
3    <v-content>
4      <div class="page">
5        <v-container>
6          <v-row justify="center">
7            <v-col cols="12" class="d-flex justify-center">
8              <GmapMap
9                :center="{ lat: 10, lng: 10 }"
10                :zoom="7"
11                map-type-id="terrain"
12                style="width: 900px"
13                :height="bkPoint.cardHeight"
14              >
15                <GmapMarker
16                  v-for="(m, index) in markers"
17                  :key="index"
18                  :position="m.position"
19                  :clickable="true"
20                  :draggable="true"
21                  @click="center = m.position"
22                />
23              </GmapMap>
24            </v-col>
25          </v-row>
26        </v-container>
27      </div>
28    </v-content>
29  </v-app>
30</template>
31
32<script>
33export default {
34  computed: {
35    bkPoint() {
36      const bkPt = this.$vuetify.breakpoint
37      const point = { name: bkPt.name, cardHeight: 200 }
38      switch (bkPt.name) {
39        case 'xl':
40          point.cardHeight = 150
41          break
42        case 'lg':
43          point.cardHeight = 150
44          break
45        case 'md':
46          point.cardHeight = 350
47          break
48        case 'sm':
49          point.cardHeight = 570
50          break
51        case 'xs':
52          point.cardHeight = 600
53          break
54        default:
55          break
56      }
57      return point
58    },
59  },
60}
61</script>