title: Router link in inner component
body: <p>Im using Vue and Ionic, this is my code:
  I have a page where I have this cards:</p>
  <pre><code>&lt;yt-course-card
              v-for=&quot;lesson in ytTheme.lessons&quot;
              :key=&quot;lesson&quot;
              :name=&quot;lesson.group_name&quot;
              :lessons=&quot;lesson.group_lessons&quot;
  &gt;&lt;/yt-course-card&gt;
  </code></pre>
  <p>in this card i have this:</p>
  <pre><code>&lt;ion-card&gt;
          &lt;ion-card-header&gt;
              &lt;ion-card-title&gt;{{ name }}&lt;/ion-card-title&gt;
          &lt;/ion-card-header&gt;
  
          &lt;ion-card-content&gt;
              &lt;ul&gt;
                  &lt;li v-for=&quot;lesson in lessons&quot; :key=&quot;lesson&quot;&gt;{{ lesson.name }}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ion-card-content&gt;
      &lt;/ion-card&gt;
  </code></pre>
  <p>This all works and does what I want it to, but I would like this li to be link to other page. I have this other page ready, but I dont know how should I write my router-link, because if I use router-link in  -li- element, it doesnt work.</p>
  <p>This is how my route-link should look like, but I dont know where or how to put it, so my li element is link to other page.</p>
  <pre><code>:router-link=&quot;`/yt-course/${lesson.slug}`&quot;
  </code></pre>