create links inside <router-link> on multiple html elements - vue.js

Question

I'm using Vuetify and to create multiple styled v-card, each card should contain link to a target but only by clicking the card's internal title or image. The problem is that I'm looping over my array of object's and wrapping each v-card with <router-link> so the entire card is clickable. here is the code:
<router-link v-for="recipe in recipes" :key="recipe.title" :to="{path: `recipe/${recipe.title}`}">
<v-card>
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ recipe.title }}</h3>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</router-link>
i found a way to attach router link to specific element using tags but that only allows me to connect single html element and here i want to use the same link on multiple elements.
any idea how can i modify this code so only the v-img and v-card-title will be linked to the recipe?

Answer 1

hope it works for you
<v-card v-for="recipe in recipes" :key="recipe.title">
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"
:to="{path: `recipe/${recipe.title}`}"></v-img>
<v-card-title primary-title :to="{path: `recipe/${recipe.title}`}">
<div>
<h3 class="headline mb-0">{{ recipe.title }}</h3>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>

Answer 2

i ended up setting it like this:
<v-card v-for="recipe in recipes" :key="recipe.title">
<router-link :to="{path: `recipe/${recipe.title}`}">
<v-img :src="require('../assets/foodpic.jpg')" aspect-ratio="2.75"></v-img>
</router-link>
<v-card-title primary-title>
<div>
<router-link :to="{path: `recipe/${recipe.title}`}">
{{ recipe.title }}
</router-link>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" disabled>Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>