使用Vue2 JS这个基本的计算数据值有什么问题？

Question

I have followed a tutorial online that uses computed data to output the first name and last name. My code is the same, but the rendered result is different. Presently, it is seeing what is after the $ as just a string and not the assigned data. https://screenshots.firefox.com/pDElTgV9EB58BjbS/127.0.0.1 What am I doing wrong?

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

The JS template literal uses backticks and not single quotes.

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