How do anchor for heading take effect?

[MyXOF]

Hi, I want add an anchor to heading, my vue file is

<template>
  <div id="app">
    <vue-markdown>
<!-- TOC -->

- [Heading1](#heading1)
  - [Heading2](#heading2)

<!-- /TOC -->

# Heading1

## Heading2

some texts
    </vue-markdown>

  </div>
</template>

<script>
  import VueMarkdown from 'vue-markdown' // production
  export default {
    name: 'app',
    data () {
      return {
      }
    },
    components: {
      VueMarkdown
    },
    mounted () {
    },

  }
</script>

After rendering, i get html codes like:

<div id="app"><div><ul>
<li><a href="#heading1">Heading1</a>
<ul>
<li><a href="#heading2">Heading2</a></li>
</ul>
</li>
</ul>
<h1>Heading1</h1>
<h2>Heading2</h2>
<p>some texts</p>
</div></div>

I suppose if i click <li><a href="#heading2">Heading2</a></li> this area, webpage should jump to <h2>Heading2</h2>.

If <h1> and <h2> label have their own id like:

<h1 id="heading1">Heading1</h1>
<h2 id="heading2">Heading2</h2>

It works. So can i achieve?

BTW, vue version is ^2.0.1 and vue-markdown version is ^2.2.4.