Pass string variable from Django to Vuejs method - vue.js

Question

I'm passing an parameter from Django to a Vue method in my html as such:
# Django view
context = {
'var1': var1,
}
<!-- html -->
<div>
<p>Display var1: {{var1}}</p>
<button #click.prevent="doThis({{var1}})">Do This</button>
</div>
<!-- html result below
Display var1: value_of_var1
-->
The above works perfectly however, the doThis({{var1}}) gives an error.
// Vue method
method: {
doThis(var1){
console.log(var1)
}
}
I get the following in the console:
undefined
...[Vue warn]: Property or method "value_of_var1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
What am I doing wrong?
How can I get the above error when I'm passing in a variable to the method?

Answer 1

My first answer above works so I'm leaving it. It is however not optimal for the purpose I wanted. Estradiaz comment is really what I needed. I was missing the quotes '' in my code. This is required when passing strings into methods. So the solution is:
<!-- html -->
<div>
<p>Display var1: {{var1}}</p>
<button #click.prevent="doThis('{{ var1 }}') ">Do This</button>
</div>

Answer 2

I couldn't figure out what is happening above but I found a way around it. I let var1 display in the html then added a style of display:none. I then used javascript to fetch the contents in my vuejs file:
<!-- html -->
<div>
<p id="get_var1" style="display: none;">{{var1}}</p>
<button #click.prevent="doThis()">Do This</button>
</div>
// Vue method
method: {
doThis(){
let var1 = document.getElementById("get_var1").textContent
console.log(var1)
}
}
// Console:
// Value_of_var1
Note that the only reason this is ok is that this isn't sensitive or secret information.