{"action":"created","issue":{"url":"https://api.github.com/repos/nighca/movue/issues/19","repository_url":"https://api.github.com/repos/nighca/movue","labels_url":"https://api.github.com/repos/nighca/movue/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/nighca/movue/issues/19/comments","events_url":"https://api.github.com/repos/nighca/movue/issues/19/events","html_url":"https://github.com/nighca/movue/issues/19","id":293241424,"number":19,"title":"Changes in nested objects not being tracked?","user":{"login":"max-mathieu","id":2975941,"avatar_url":"https://avatars0.githubusercontent.com/u/2975941?v=4","gravatar_id":"","url":"https://api.github.com/users/max-mathieu","html_url":"https://github.com/max-mathieu","followers_url":"https://api.github.com/users/max-mathieu/followers","following_url":"https://api.github.com/users/max-mathieu/following{/other_user}","gists_url":"https://api.github.com/users/max-mathieu/gists{/gist_id}","starred_url":"https://api.github.com/users/max-mathieu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max-mathieu/subscriptions","organizations_url":"https://api.github.com/users/max-mathieu/orgs","repos_url":"https://api.github.com/users/max-mathieu/repos","events_url":"https://api.github.com/users/max-mathieu/events{/privacy}","received_events_url":"https://api.github.com/users/max-mathieu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-01-31T17:16:08Z","updated_at":"2018-02-06T01:00:26Z","closed_at":null,"author_association":"NONE","body":"Hi there, thanks a ton for this integration!\r\n\r\nWhile evaluating Vue with mobx-state-tree, I've been getting issues trying to track changes in nested objects, as if only the things listed in `fromMobx` are defined as reactive.\r\n\r\nThen I found [this change](https://github.com/nighca/movue/commit/26fc5b8e7c16aa47b662c85694df2710c9458919) and I am curious about the motivation behind using the shallow option. Was this performance? Other? It looks like vue-rx [does not do that](https://github.com/vuejs/vue-rx/blob/cde4f9d76df8f3e51752595100163d53fc6a82c7/src/mixin.js#L38)\r\n\r\nTo help, here is my code:\r\n```\r\n  computed: {\r\n    item() {\r\n      return this.project.item\r\n    },\r\n  },\r\n  fromMobx: {\r\n    project() {\r\n      return shop.projects.getFirst()\r\n    },\r\n  },\r\n  methods: {\r\n    updateItem() {\r\n      this.project.setItem(this.newItem)\r\n    }\r\n  }\r\n```\r\n`shop.projects` being a mobx-state-tree store, with a `setItem` function that updates the `project.item`. mobx-state-tree being immutable, `project.item` effectively points to a different observable, but movue does not track the change\r\n\r\nLet me know your thoughts\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/nighca/movue/issues/comments/363274220","html_url":"https://github.com/nighca/movue/issues/19#issuecomment-363274220","issue_url":"https://api.github.com/repos/nighca/movue/issues/19","id":363274220,"user":{"login":"nighca","id":1492263,"avatar_url":"https://avatars3.githubusercontent.com/u/1492263?v=4","gravatar_id":"","url":"https://api.github.com/users/nighca","html_url":"https://github.com/nighca","followers_url":"https://api.github.com/users/nighca/followers","following_url":"https://api.github.com/users/nighca/following{/other_user}","gists_url":"https://api.github.com/users/nighca/gists{/gist_id}","starred_url":"https://api.github.com/users/nighca/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nighca/subscriptions","organizations_url":"https://api.github.com/users/nighca/orgs","repos_url":"https://api.github.com/users/nighca/repos","events_url":"https://api.github.com/users/nighca/events{/privacy}","received_events_url":"https://api.github.com/users/nighca/received_events","type":"User","site_admin":false},"created_at":"2018-02-06T01:00:26Z","updated_at":"2018-02-06T01:00:26Z","author_association":"OWNER","body":"@max-mathieu Actually it is expected with current realization. MobX and Vue both relies on \"define observable property\" to make data observable. In your example code, property `project` on `this` is a Vue property, while property `item` on `project` is a MobX property, which means, accessing (calling `getter` of) property `project.item` will not be tracked in Vue's `computed` context.\r\n\r\nWe can't define a property multi times (only the last definition will work). So if we use `shallow = true` while calling `defineReactive`, it will break MobX's observable mechanism on internal data structure (such as the property `project.item`). That's why we use `shallow = false` instead.\r\n\r\nTechnically, you should access \"MobX property\" only in `fromMobx` context. For example:\r\n\r\n```js\r\nimport { toJS } from 'mobx'\r\n\r\nexport default {\r\n  fromMobx: {\r\n    project() {\r\n      // toJS converts obervable data to normal Javascript data\r\n      // which will notify movue that the data content got accessed\r\n      return toJS(shop.projects.getFirst())\r\n    },\r\n  }\r\n}\r\n```\r\n\r\nBut it is not friendly for users to keep that in mind. So we are considering to make some improvement so that your example code will work.\r\n\r\nHere are some ideas if you are interested to discuss with us:\r\n\r\n1. Use `toJS` by default to convert result of `fromMobx` getters\r\n\r\n    This is easy, but may introduce performance issues, as every single change on dep-data will cause result's `toJS` convert and will produce a totally new object (which is not friendly to Vue, either).\r\n\r\n2. Create a mirror object on Vue context and use technologies like mobx-state-tree's JSON-Patch to keep it in sync with the result of `fromMobx` getter\r\n\r\nWhat do you think? We really appreciate your feedback.\r\n"}}
{"actor":{"display_login":"nighca"}}