is there anyone who can link to external url from json data by using vue

I have a big problem to link to external url. This url im taking from json and connecting to HTML tag. However i can not get url data and link to that url when I click images.

If anyone know how to, i would be very appreciated if you can help me out... I try this code i cant make it work for few hours.. I have now no idea what to do.

HTML

<section class="bg-light page-section" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center"><br>
          <h2 class="section-heading text-uppercase works-text">Works</h2>
          <h3 class="section-subheading text-muted">Selected work that has been created with the help of many.</h3>
        </div>
      </div>
      <div class="row">
       <div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolioJSON" :key="key">
          <a :href="`${obj.url}`" class="portfolio-link" data-toggle="modal" target="_blank">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">

              </div>
            </div>
            <img :src="`${obj.img}`" class="img-fluid">
          </a>
          <div class="portfolio-caption works-text">
            <h4 class="works-text">{{ obj.caption }}</h4>
            <p class="text-muted works-text">{{ obj.title }}</p>
          </div>
        </div>

      </div>
    </div>
  </section>

export default {
    data() {
      return {
        portfolioJSON: [
           {
                img: require('../assets/img/sukimatch/sukimatch.png'),
                caption: 'Sukimatch',
                title: 'WEBSITE, BANNER DESIGN',
                url: "https://sukimatch-f887f.firebaseapp.com/"
            },
            {
                img: require('../assets/img/portfolio/greencosjapan.png'),
                caption: 'Greencosjapan',
                title: 'WEBSITE',
                url: "https://greencosjapan.com"
            }       ]
    }
    }
}
```