Vue - 访问Vue外部组件中的数据 - 单个文件组件

Question

如何在单文件组件内部访问和更改组件和Vue实例的组件数据？

sigle文件中的组件，如：

<script>
    export default {
        data() {
            return {
                lock: true,
                connection: '',
                login: true,
                message: {
                    time: '',
                    nick: '',
.......................

该文件是chat.vue

主Vue应用：

var app = new Vue({
    el: '.app',

    components: {
        Chat
    }

});

我需要从

等访问和示例数据

Socket.onopen = function(e)
    {
        Chat.connection = 'Zostałeś połączony pomyślnie!';
        Chat.lock = false;
    };

在组件之外但在此组件文件中

试过像

这样的东西

Chat.message.nick = 'xxxx';但不起作用

this.message.nick = 'xxx';也不起作用+我收到错误：named exports are not supported in *.vue files.

var chat = export default....也不起作用，爆炸

还有很多事......我不知道......

我唯一能做的就是在HTML中的组件上使用ref="Chat"。但它不是我想要的，它允许我引用我的组件的数据但不在这个组件vue单个文件但在我的主js文件

我需要引用数据并在此组件vue单个文件中进行更改