Что не так с этим базовым вычисленным значением данных с использованием Vue2 JS?

Question

Я следовал онлайн-уроку, который использует вычисленные данные для вывода имени и фамилии. Мой код такой же, но результат визуализации другой. В настоящее время он видит то, что после $, как просто строку, а не назначенные данные. https://screenshots.firefox.com/pDElTgV9EB58BjbS/127.0.0.1 Что я делаю не так?

const app = new Vue({
    el: "#app",
    data: {
        bobby: {
            first: "Bobby",
            last: "Boone",
            age: 25
        },
        john: {
            first: "John",
            last: "Boone",
            age: 35,
        }
    },
    computed: {
        bobbyFullName() {
            return '${this.bobby.first} ${this.bobby.last}'
        },
        johnFullName() {
            return '${this.john.first} ${this.john.last}'
        }
    },
    template: `
    <div>
        <h1>Name: {{bobbyFullName}}</h1>
        <p>Age {{bobby.age}}</p>

        <h1>Name: {{johnFullName}}</h1>
        <p>Age {{john.age}}</p>

    </div>
    `
}) 

Answer 1

Литерал шаблона JS использует обратные пометки, а не одинарные кавычки.

computed: {
    bobbyFullName() {
        return `${this.bobby.first} ${this.bobby.last}`;
    },
    johnFullName() {
        return `${this.john.first} ${this.john.last}`;
    }
}