Javascript 使用VUE.js加载内容

我正在尝试使用vue.js呈现2条消息，但它似乎不会加载到FE上

<template v-for="item in items">
    <span>{{ afterpayMessage }}: {{ item.price }} with AfterPay</span>
</template>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
  data: {
    afterpayMessage: 'Or 4 payments of',
    items: [
      { price: {{ product.price | money_with_currency | json }} },
    ]
  }
})
</script>

{{afterpayMessage}}:{{item.price}}带AfterPay
var afterpay=新Vue({
el:“#售后服务”，
数据：{
afterpayMessage:'或4次付款'，
项目：[
{price:{{product.price | money | u with | currency | json}}}，
]
}
})

我已经尝试过使用下面的代码，有人建议它包含一个返回函数，但是所有呈现的都是“with afterpay”文本，而不是模板

<div id="afterpay" v-for="item in items">
    {{ afterpayMessage }}: {{ item.price }} with AfterPay
</div>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
    data: function () {
      return {
        afterpayMessage: 'Or 4 payments of',
        items: [
          { price: {{ product.price | money_with_currency | json }} },
         ]
      }
    }
});
</script>

{{afterpayMessage}}:{{item.price}}带AfterPay
var afterpay=新Vue({
el:“#售后服务”，
数据：函数（）{
返回{
afterpayMessage:'或4次付款'，
项目：[
{price:{{product.price | money | u with | currency | json}}}，
]
}
}
});

您可以使用此数据格式

数据：函数（）{ 返回{ afterpayMessage:'或4次付款'， 项目：[ {price:{{product.price | money | u with | currency | json}}}， ] } }