将Symfony ArrayCollection传递给VueJS作为道具

Question

我有一个ArrayCollection标签：

/**
 * @return ArrayCollection|Tag
 */
public function getTags()
{
    return $this->tags;
}

我想通过道具将数据发送到我的Vuejs组件：

<tags-comment :comment-tags="{{ comment.tags.toArray|json_encode }}"></tags-comment>

每当我遍历Twig中的集合时，都会得到预期的结果：

<div class="tags">
   {% for tag in comment.tags %}
      <span class="tag" style="background-color:{{ tag.color }}; color: #fff">{{ tag.title }}</span>
   {% endfor %}
</div>

但是在VueJS中，我的道具返回了一个空对象数组：

如何传递数据？知道comment-tags="{{ comment.tags|join }}"可以工作并且实际上以字符串形式返回连接的值，因此ArrayCollection不能为空。