Version

3.1.4

Reproduction link

https://codesandbox.io/s/error-when-option-v-if-choicesjs-forked-uoxq4?file=/src/components/Select.vue

Steps to reproduce

Take library Choices.js for example:

1. Use v-if in <option> (This is what the doc of choices.js ask user to do)

<template>
<select>
  <option value="" v-if="OPTIONS.length === 0">I'm a placeholder</option>
</select>
</template>

2. Initialize Choices.js instance.
3. Dynamically add options from Choices.js instance. Exploded.

What is expected?

No error, or a comprehensible error message emitted by Vue.

What is actually happening?

Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null

1. Some other libraries which manipulate DOM, such as the famous select2 jQuery plugin, have similar error.
2. I don't sure if this is a bug, or user indeed should not use v-if like this. If it is the later one, I also don't sure whether the error message emitted by Vue could be more comprehensible to user to know what exactly happened. (I spent 4 hours to find out where exactly this problem is.)

The rule of thumb is: if the element is consumed by an external library, let the external library completely handle it, so no elements inside of it that are handled by Vue. Otherwise, Vue will try to manipulate assuming it's the only one doing so to be able to apply the correct updates.