Vue: Use Vue to be a component in js cant change the boolean in object

[hpym365]

Loading.vue

<template>
  <div>
    <h1 v-if="options.loading">加载中...{{options.loading}}</h1>
    <h1 v-else>加载完成{{options.loading}}</h1>
    <!--  增加这行代码之后就会改变-->
    <!--<p>ld:{{ld}}</p>-->
  </div>

  <!--<div>-->
  <!--<h1 v-if="options.loading">加载中...{{options.loading}}</h1>-->
  <!--<h1 v-else>加载完成{{options.loading}}</h1>-->
  <!--<p>{{ld}}</p>-->
  <!--</div>-->
</template>
<script>
  export default{
    props: {
      options: {
        type: Object,
        default: {loading: true}
      },
      ld: {type: Boolean}
    },
    methods: {}
  }
</script>

js

function loading(div, options) {
    div.append('<loading :options="options" :ld="ld"></loading><p>{{ this.options }}123aa</p>')
    var loading = window.returnobject.$loading
    var loadingvue = new Vue({
      el: div[0],
      data: {
        options: options,
        ld: false
      },
      components: {loading},
      methods: {
        changeLoading: function () {
          this.options.loading = !this.options.loading
          this.ld = !this.ld
        }
      }
    })

    loadingvue.jqdom = $(loadingvue.$el)
    return loadingvue
  }

use

var optionsloading = {loading: false}
    var options = {}
    options.message = 'page c show message'
    var pagecdiv = component.div(div, options)

    var loading = component.loading($('#vueshowbutton'), optionsloading)

    var close2 = component.button($('#vueshowdiv'), {
      btn: '加载中1',
      funclick: loading.changeLoading
    })

<h1 v-if="options.loading">加载中...{{options.loading}}</h1>
    <h1 v-else>加载完成{{options.loading}}</h1>
    <!--  增加这行代码之后就会改变-->
    <!--<p>ld:{{ld}}</p>-->

如果下面的ld那行不写个变量去改变 那么上面的不会change
如果把options.loading 换成 普通boolean变量 通过 props传入也没问题

but use the loading.vue in other vue wont show it

this is the source
https://github.com/hpym365/vue-element

1、npm install

serve with hot reload at localhost:8888

2、npm run dev
3、see bug tag //loading.vue in other vue wont show it
4、use in js see demo.html src/test/demo.html
keep your server running dev and dont open it in explorer
my url is http://localhost:63342/vue-element/src/test/demo.html?_ijt=cj3r8ov97h2n9anbflpil7a8cg#/
5、click page c and click button 加载中1

waiting for 尤大 online

[HerringtonDarkholme]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

In case you are asking a question, we have chat room, forum and beloved stackoverflow. The issue list of this repo is exclusively for bug reports and feature requests. Thanks for your support!

[hpym365]

why ? i think it's a bug

[HerringtonDarkholme]

If you think it is a bug, please provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

[hpym365]

it only can reproduce in a particular scene ...
can u clone the github have a try ?
https://github.com/hpym365/vue-element

[hpym365]

when i use the variable type of (boolean in object) it wont work when i use the boolean it work...in the scene ...

[hpym365]

@HerringtonDarkholme @yyx990803

[simplesmiler]

@hpym365 a project does not count as a reproduction. Reproduction should be minimal and concise, displaying only the issue and nothing else.

If you can not make a concise reproduction, then most likely it's a bug in your code, and not in the library, and thus your problem belongs to the forum, and not to the issue tracker.

It's fine to have a reproduction as a repo instead of a fiddle, but it still should be concise, and explain what result is expected and what goes wrong.