How to create href link from Vue js response

let's start with example that I am developing in my project. My project in laravel so below example is in blade file.

using Vue js I get response and set in template structure.

<ul>
    <li v-for="brand in list">
        @{{brand.name}}
        <a href="#"> // how to create href url from brand name that come from Vue response and I want to replace space with dash from brand name and pass to href url

                           <img :src="brand.image">

                   </a>

    </li>
    
</ul>

let's assum that I am getting brand.name = test demo

And using this brand.name I want to build href url like this : href = "brand/test-demo".

One more thing I want to complete is :

Want to pass this href link to other Vue http request like

created: function(){

    axios.get('brand/test-demo').then(response => this.detail = response.data) ;

}  

How to do these think ? I don't have any idea ? any help would be great.

Thanks

UPDATE :

I have tried below methods but none of working.

href="{{url('brand/' + brand.name}}

href="{{url('brand/'}} + brand.name

But when I pass full URL it's work like :

href="'http://localhost/gift_india/' + brand.name "> // this one work but I want dynamic URL.