title: How to alter one Vue TypeScript Component from another?
body: <p>I am trying to get my feet wet with some technologies I've not used before, so I am working off the Visual Studio Vue project template. I have <code>LoginDialog</code> and <code>LoginPanel</code> components, and I'm trying to get the syntax right for having the 'Login' button in <code>LoginPanel</code> set a 'visible' attribute on <code>LoginDialog</code>. </p>
  
  <pre><code>// Login Dialog .ts
  import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  
  @Component
  export default class LoginDialogComponent extends Vue {
      visible: boolean = false
  }
  
  // Login Panel .ts
  import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  import { LoginDialogComponent } from '../loginDialog/logindialog'
  
  @Component
  export default class LoginPanelComponent extends Vue {
      show() {
          LoginDialogComponent.visible = true
      }
  }
  </code></pre>
  
  <p>But, in the browser I get an error about the line <code>import { LoginDialogComponent } from '../loginDialog/logindialog'</code> saying that </p>
  
  <blockquote>
    <p>TS2305: Module '"ClientApp/components/loginDialog/logindialog"' has no exported member 'LoginDialogComponent'</p>
  </blockquote>
  
  <p>I notice the <code>LoginDialogComponent</code> class has the <code>export</code> keyword, which would suggest it is exported, and the <code>visible</code> member doesn't allow the export keyword. Any idea what I'm mucking up here?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>One other thought I had is maybe I need to be wiring these things up in my app.ts file, defined as:</p>
  
  <pre><code>import Vue from 'vue';
  import { Component } from 'vue-property-decorator';
  
  @Component({
      components: {
          MenuComponent: require('../navmenu/navmenu.vue.html'),
          LoginPanelComponent: require('../loginPanel/loginpanel.vue.html'),
          LoginDialogComponent: require('../loginDialog/logindialog.vue.html')
      }
  })
  export default class AppComponent extends Vue {
  }
  </code></pre>
  
  <p>I'm not 100% sure what it's doing here - do these component listings create instances of the classes they are referencing? If that's the case, I suppose I would have to pass the <code>Dialog</code> component to the <code>Panel</code> component, or have a reference to the <code>Dialog</code> in the <code>App</code> component, and pass <em>that</em> into the <code>Panel</code>?</p>