Uncaught TypeError: 未定義のプロパティを読み取れません ('bottom' を読み取っています) vue2 ドラッグ アンド ドロップ コンポーネントの奇妙なバグ

環境 vue2 + eleme + vue-smooth-dnd ドラッグ アンド ドロップ コンポーネントを使用します

基本的な機能は、

1. ボタンをクリックして、el-dialog（要素ポップアップボックス）を表示します。

2. el-dialogにはドラッグアンドドロップコンポーネントがあります

3. 最上位の div の CSS margin;padding;width に CSS 値を設定している限り、ドラッグ コンポーネントはエラーを報告します。

最初の行に注目してください。とても奇妙です。見つけるのに数時間かかりました。 

<template>
  <!-- 顶层div 不能设置css值,使用class 设置也不行 设置后就会报错,具体原因不知道 -->
  <div style="margin: 10px;padding: 10px;">
    <!-- 这里设置 margin: 10px; 也会触发这个bug 完全无法理解为什么   -->
    <div class='top' style="width: 290px;height: 20px;margin: 10px;">
      <i class="el-icon-setting" @click="show = true"></i>
    </div>
    <!--  资讯展现部分  -->

    <el-dialog :visible.sync="show" width="320px" :modal="false" >
      <Container @drop="onDrop" orientation="vertical" >
        <Draggable v-for="(item,i) in news_left_order" :key="'Dropleft_news_' + i">
          <div class="types" :key="'Dropleft_news_div_' + i">
            拖拽拖拽拖拽拖拽拖拽拖拽{
   
   {item}}
          </div>
        </Draggable>
      </Container>
    </el-dialog>

  </div>
</template>

<script>
import Vue from 'vue'
import {Container, Draggable} from 'vue-smooth-dnd' //拖拽 需要使用 components注册
Vue.component('Container', Container)
Vue.component('Draggable', Draggable)
//Vue._init
export default {
  name: 'LeftNews',
  data() {
    return {
      //index_data 数据是从 首页ajax 统一获取的,这里的字段必须是 ajax返回中含有的
      show: false,
      news_left_order:[1,2,3,4,5]
    }
  },
  methods: {
    onDrop(dropResult) {
    }
  }
}
</script>