HMR not working properly when div is nested inside li tag

[mornir]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

In the following code snippet, when I make changes inside the div tag and save my code, only the last item gets updated in the browser. I have to refresh the page for the changes to be applied to all the other items.

    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span>{{ todo.text }}</span>
        <div>
          <!-- Only last item is updated -->
          <button>Archive</button>
        </div>
      </li>
    </ul>

(Maybe I'm missing something obvious here? From what I read, nesting div inside li is valid HTML.)

Reproduction

https://github.com/mornir/vite-project

System Info

• vite version: 2.0.0-beta.69
• Operating System: Windows 10
• Node version: 14.15.0
• Package manager (npm/yarn/pnpm) and version: yarn, v1.22.5

Thanks for this awesome tool! ❤