Still cannot assign a variable from flask to vue.js - vue.js

Question

Basically what I want to do is to pass variable from flask to vue.js, but nothing seems to be working. So far I've tried a lot of options and suggested idea from JavaScript raises SyntaxError with data rendered in Jinja template but my problem is still here. Exactly what I'm trying to do is when passed argument d_var from flask, I want it to be displayed on html(title_variable) using vue.js.
VUE.JS CODE
var app = new Vue({
el: "#app",
delimiters : ['[[', ']]'],
data: {
message: "Hello vue! (a dynamic thing)",
title_variable = {{d_var}},
indication true,
j: "You should work harder"
}
HTML
<div id="app">
<p>
{{ message }}
</p>
<p>
<span v-bind:title="title_variable">
Show me some text...
</span>
</p>
</div>
FLASK
from flask import Flask, Response, jsonify, request, flash,
render_template,
import os
import json
app = Flask(__name__)
#app.route("/")
def home():
d_var = 'ahahahah'
return render_template("index.html", title_variable=d_var)
if __name__=="__main__":
app.secret_key=os.urandom(12)
app.run(debug=True,host='0.0.0.0',port=5000)

Answer 1

Several problems here...
You've set your Vue delimiters to use [[...]] so you should use
[[ message ]]
in your Vue template
Flask is passing d_var to index.html as title_variable so that's what you should use within {{...}}, not d_var
Your JavaScript data object isn't valid. You should not be using = to assign property values. Try this instead
var app = new Vue({
el: "#app",
delimiters : ['[[', ']]'],
data: {
message: "Hello vue! (a dynamic thing)",
title_variable: {{ title_variable|tojson }},
indication: true,
j: "You should work harder"
}
})
See here for information on the tojson() filter ~ https://flask.palletsprojects.com/en/1.1.x/templating/#standard-filters