Vue: содержимое мерцает при анимации элемента, который удаляется из списка

Question

У меня возникла проблема при попытке анимировать элемент, который был удален из списка (с помощью группы перехода). Планировка довольно простая. Вверху экрана находится список ошибок, а под этим списком кнопка, удаляющая последний элемент из массива ошибок. С этим макетом все работает нормально. Проблема начинается, когда между списком и кнопкой добавляется какой-то контент. Если содержимое достаточно велико, чтобы вытолкнуть список ошибок из области просмотра, при нажатии кнопки содержимое «мерцает» (или «трясется»). Как ни странно, это поведение не реплицируется в jsfiddle (https://jsfiddle.net/gaqmbr7s/), а только когда я запускаю проект локально.

Это экранная запись, демонстрирующая такое поведение

Это мой код:

Шаблон (с добавлением фиктивного содержимого):

      <template>
  <div>
    <transition-group name="height-fade-out">
      <div v-for="error in errors" :key="error.id" class="error">
        {{ error.msg }}
      </div>
    </transition-group>

    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate harum officia dignissimos dolorem iusto eveniet odio minima veniam porro tenetur ut iste ex at delectus cum, culpa soluta
        dicta!
      </p>
      <br />
      <br />
      <br />
      <br />
      <h2>Some content</h2>

      <input type="text" />

      <br />
      <br />
      <br />
      <br />
    </div>

    <button @click="removeError">remove error</button>
  </div>
</template>

Javascript:

      <script>
export default {
  name: 'App',
  data() {
    return {
      errors: [
        { id: 1, msg: 'error 1' },
        { id: 2, msg: 'error 2' },
        { id: 3, msg: 'error 3' },
        { id: 4, msg: 'error 4' },
      ],
    };
  },
  methods: {
    removeError() {
      this.errors.pop();
    },
  },
};
</script>

Стили:

      <style>
.error {
  display: flex;
  flex-direction: row;
  padding: 8px 12px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 3px;
  background-color: rgba(253, 196, 162, 0.2);
  max-height: 100px;
}

.height-fade-out-enter-active {
  transition: opacity 0.5s;
}

.height-fade-out-enter {
  opacity: 0;
}

.height-fade-out-leave-active {
  transition: all 0.5s ease-out;
}

.height-fade-out-leave-to {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>