为什么 Vue2 中的 v-html 渲染的 <p> 标签结构会发生变化？

v-html渲染<p>标签时渲染的结构与传入的结构不一致

<script>
export default {
  data() {
    return {
      html: `<p>` +
                `<a target="_blank">` +
                    `<div>` +
                        `aaaaaaa` +
                    `</div>` +
                `</a>` +
            `</p>`
    }
  }
}
</script>

<template>
  <div v-html="html"></div>
</template>

传入的字符串结构是:-p -a

-div
  -text

但是渲染出来的结构却是混乱的，经测试去掉<p>标签后就正常了。使用的是vue2，由于在做的是编辑器，所以不可避免地有<p>标签的情况，想问下这是什么原因导致的渲染异常