Using vue.js in Shopify liquid templates

Question

This should be simple but despite searching I was unable to find any solution to this. How do you use vue template tags within a liquid file? Since both Vue and liquid use the same curly brackets, I'm unable to render any of my view data:

<img src="{{ product.featured_image }}" />

results in:

<img src>

There are 36 products in my parent view component.

When I try to use custom delimiters:

new Vue({
  delimiters: ['@{{', '}}'],

It won't parse with Vue:

  GET https://inkkas.com/collections/@ 404 (Not Found)

UPDATE: I'm able to access Vue data with v-bind: but I still need to be able to use delimiters also.

Answer 1

Apparently with Shopify, you can't put these delimiters in the tag attributes at all so for those use v-bind: (the shorthand won't work). Also you have to use a single curly brace for your custom delimiter or it will still try to parse with liquid, for example:

delimiters: ['${', '}']

will work with:

<span class="title">${ product.title }</span>