在Vuejs组件中使用PHP变量

我为Wordpress编写了一些自定义代码，需要使用Vuejs访问一些PHP变量。 现在我无法访问PHP变量，而且我得到了一个错误，我不确定是什么错误（数据错误）

{{modality_list}
//这里是纯文本
新Vue({
el:“#应用程序”，
data（）{//这里我得到“uncaughtsyntaxerror:unexpectedtoken'}”
返回{
形态列表：，
}
},
创建（）{
var new_val=
log（'Val:'，new_Val）//这里我得到NULL
}
});

错误是什么？你能提供更多的细节吗？Vue不是那样工作的，你需要制作一个组件，并在调用该组件时将其作为道具传递。事实上，它可以工作，我必须补充，没有错误，工作正常。

<?php
function nrc_new_modalities(){
    $user_id = get_current_user_id();
  
    $multipleSelect2 =  get_user_meta( $user_id, 'multipleSelect2', true );
    $multipleSelect2 = isset( $multipleSelect2 ) ? $multipleSelect2 : array();
  
    $modality_list    = get_terms([
      'taxonomy'    => 'product_cat',
      'hide_empty'  => false,
      'parent'      => 92
  ]);
?>

<div id="app">
  <p>{{modality_list}}</p> //Here I get plain text
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() { // Here I get "Uncaught SyntaxError: Unexpected token '}'"
            return {
                modality_list: <?php json_encode($modality_list) ?>,
            }
        },
        created(){
            var new_val = <?php json_encode($modality_list) ?>
            console.log('Val:', new_val)  //here I get NULL
        }
    });
</script>

<?php
}
?>