Метод компонента Vue.js возвращает "undefined" в HTML.

Question

Я пробовал испытать API Dropbox, согласно Книге Пакта "Полная веб-разработка на Vue.js 2 (глава 4)". Поскольку include_media_info недавно устарел, я попытался адаптировать пример кода для dropbox(). FilesGetMetadata() для запроса метаданных изображений.

JavaScript выглядит так:

Vue.component("dropbox-viewer", {
    template: "#dropbox-viewer-template",

    data() {
        return {
            accessToken:
                "XXXXXX",
            structure: [],
        }
    },

    methods: {
        dropbox() {
            return new Dropbox.Dropbox({
                accessToken: this.accessToken,
                fetch: fetch,
            })
        },

        getFolderStructure(path) {
            this.dropbox()
                .filesListFolder({ path: path })
                .then((response) => {
                    console.log(response.entries)
                    this.structure = response.entries
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        getDimensions(path) {
            let dimensions = ""
            this.dropbox()
                .filesGetMetadata({ path: path, include_media_info: true })
                .then((response) => {
                    if ("media_info" in response) {
                        dimensions = response.media_info.metadata.dimensions
                        console.log(dimensions)
                        console.log(typeof dimensions)
                        return dimensions
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },

    created() {
        this.getFolderStructure("")
    },
})

Соответствующий HTML-код выглядит следующим образом:

<div>
   <h1>Dropbox Viewer</h1>
   <li v-for="entry in structure">
      <span>{{ entry[".tag"] }}</span>
      <strong>{{ entry.name }}</strong>
      <span v-if="entry.size"> - {{ entry.size }}</span>
      <span v-if="entry['.tag'] === 'file'">
         {{ entry.path_lower }}
         {{ typeof getDimensions(entry.path_lower) }}
      </span>
   </li>
</div>

Из console.log(размеры) в js я заметил, что размеры - это объект с высотой и шириной. Консольный вывод

Однако при отображении в HTML он не определен. Визуализированный HTML

Я не уверен, есть ли у меня неправильное представление о возвращаемом значении из метода Vue. Поэтому я хотел бы спросить вашего совета. Заранее большое спасибо.