[Vuejs]-How do I pass a variable to border style property in VueJs

if you bind your style, it expects an object.

This is an object: {}. You start with curly braces you can see it in the documentation too https://v2.vuejs.org/v2/guide/class-and-style.html

:style="{ 'border-left': '10px solid ' + colour }"

or with literals:

:style="{ 'border-left': `10px solid ${colour}` }" 

You dont need to put everything inside the HTML markup, you can also put it into the data:

data() {
   return {
      styling: {
         'border-left:': `10px solid ${this.colour}`
      }
   }
}

:style="styling"