Vue.js doesn't display brackets like {{ post.title }} - vue.js

Question

For some reason Vue doesn't render {{post.title}}, {{ post.content }} brackets for me. The content is empty (look at the rendered html below), but v-bind:href="post.url" works for some reason. I'm new to Vue.js and really stuck for day now.
Backstory:
this code is Vue instant search for my Jekyll blog.
HTML
<div v-if="articles" class="large-12 columns">
<article v-for="post in itemsSearched" class="article-summary">
<header>
<h2><a v-bind:href="post.url">{{post.title}}</a></h2>
</header>
<p>{{ post.content }}</p>
<div class="large-12 column">
<a class="read-more" v-bind:href="post.url">Read More...</a>
<div class="middle_line"></div>
</div>
</article>
</div>
Rendered HTML
<article class="article-summary">
<header>
<h2></h2>
</header>
<p></p>
<div class="large-12 column">
Read More...
<div class="middle_line"></div>
</div>
</article>

Answer 1

Jekyll uses double curly braces itself, so you need to define custom delimiters for your Vue.
new Vue({
delimiters:['<%', '%>'],
....
})
And then use
<% post.title %>
Instead.
You can define whatever delimiters you want, I just used those as an example.

Answer 2

Please use v-text or v-html instead. In vue 2.0,Vue-config-delimiters was deprecated, delimiters is only avaliable in the full build.[]:https://v2.vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced