Vue：使用模板文字作为模板时未定义属性

Question

我正在尝试使用以下代码创建Vue组件：

Vue.component('side-heater-control',{
        props: ['heater'],
        template: "<div>Current temp: ${ heater.currentValueDegC } °C <br><label :for=\"'p-val-'+heater.id\">P:</label><div class=\"input-group mb-3\"><input type=\"number\" v-model.number=\"heater.p\" :id=\"'p-val-'+heater.id\"></div></div>"
    });

当我像这样实现它时，它可以很好地工作，但是一旦我为模板使用模板文字：

Vue.component('side-heater-control',{
        props: ['heater'],
        template: `<div>
        Current temp: ${ heater.currentValueDegC } °C <br>
        <label :for="'p-val-'+heater.id">P:</label>
        <div class="input-group mb-3">
        <input type="number" v-model.number="heater.p" :id="'p-val-'+heater.id">
        </div>
        </div>`
    });

我会得到一个ReferenceError: heater is not defined

我在这里创建了一个最小的示例：https://jsfiddle.net/km9e2n43/2/