Mismatching parent from Buefy dropdown example

[darr1s]

Overview of the problem

Buefy version: buefy@latest
Vuejs version: nuxt@latest
OS/Browser: Chromium 60

Description

Hello there, firstly thanks maintaining for such amazing UI toolkit. However, I have met an issue where it says mismatched parent from official example. I have tried looking into matching div but can't seem to find any problem.

Steps to reproduce

Here is my Navbar.vue

Here is the repo that has issue.

<template>
<nav class="navbar">
  <div class="navbar-brand">
    <nuxt-link class="navbar-item" to="/">
      <img src="~/assets/logo_glyph.png" alt="" height="28">
    </nuxt-link>

    <span class="navbar-burger burger" :class="{ 'is-active': isMenuActive }" @click="isMenuActive = !isMenuActive">
        <span></span>
    <span></span>
    <span></span>
    </span>
  </div>

  <div class="navbar-menu" :class="{ 'is-active': isMenuActive }">
    <div class="navbar-start">
      <nuxt-link class="navbar-item" to="/events">
        <b-icon icon="event"></b-icon> Events
      </nuxt-link>
      <nuxt-link class="navbar-item" to="/clubs">
        <b-icon icon="face"></b-icon> Clubs
      </nuxt-link>
      <nuxt-link class="navbar-item" to="/about">
        <b-icon icon="face"></b-icon> About
      </nuxt-link>
    </div>

    <div class="navbar-end">
      <b-dropdown position="is-bottom-left">
        <a class="navbar-item" slot="trigger">
                              <span>Login</span>
                              <b-icon icon="arrow_drop_down"></b-icon>
                          </a>

        <b-dropdown-item custom paddingless>
          <form action="">
            <div class="modal-card" style="width:300px;">
              <section class="modal-card-body">
                <b-field label="Email">
                  <b-input type="email" placeholder="Your email" required>
                  </b-input>
                </b-field>

                <b-field label="Password">
                  <b-input type="password" password-reveal placeholder="Your password" required>
                  </b-input>
                </b-field>

                <b-checkbox>Remember me</b-checkbox>
              </section>
              <footer class="modal-card-foot">
                <button class="button is-primary">Login</button>
              </footer>
            </div>
          </form>
        </b-dropdown-item>
      </b-dropdown>
    </div>
  </div>
</nav>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex'

export default {
  components: {},
  computed: {
    ...mapGetters({
      'currentUser': 'auth/currentUser',
      'error': 'auth/authError'
    })
  },
  data() {
    return {
      isMenuActive: false,
      user: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    signIn() {
      this.$store.dispatch('auth/signIn', {
        axios: this.$axios,
        user: this.user
      })
    },
    ...mapActions({
      signOut: 'auth/signOut'
    })
  }
}
</script>

Expected behavior

Dropdown working as intended.

Actual behavior

It is actually working just fine, other than Material Icon magically disappear after page load.