Vue 和 JQuery 共存时， JQ（原生 JavaScript） 如何修改 Vue 中的数据

Question

场景

目前页面已经有一个基于 DataTables 的表格。功能实现较多，无法 Vue 实现。

目前需要实现在 DataTables 中选择一些条目，然后在 Vue 中执行后续的操作。

目前遇到的问题

通过 Webpack 打包后，无法在 console 中获取到 app 的示例，不知道该如何修改 vue 中的数据。

代码

app.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#vueapp',
    render: h => h(App)
});

项目依赖版本

"vue": "^2.5.16"

webpack:3.12.0

使用 Laravel 5.6 构建

希望得到的方案

1.一段代码，可以实现使用原生 JS 或 JQuery 修改 Vue 中的数据
2.webpack打包后如何在 console 中暴露出 vue 示例。

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

vue是一个基于对象的组件库（所有的 组件都是对象，他的 方法啊，data啊都存在于组件对象里面。
而你要用一个操作dom的库去操作Vue对象,把vue数据给修改了，这怎么可能呢，就算把dom节点改了其实也没什么作用，vue会下次改回来。
而原生的 js 的确是可以操作对象，你把这个对象暴露出来，然后通过js操作，然后改数据，但是呢，那你去操作vue对象，为什么不直接使用vue呢？

Answer 2

window.app = new Vue({
    el: '#vueapp',
    render: h => h(App)
});