title: Vue.js: How do you call component specific methods outside of component?
body: <p>The goal here is to use OpenTok WebRTC platform for a video chat web app built with vue. Here is an example of <a href="https://github.com/opentok/opentok-web-samples/tree/master/Vue-Basic-Video-Chat" rel="nofollow noreferrer">OpenTok in Vue</a>.</p>
  
  <p>I'm getting confused on where to call specific methods for the publisher because it is nested within a session.vue component. I want to call methods such as:</p>
  
  <p>1) Stop publishing
  2) Change the publisher to source from a video instead of webcam</p>
  
  <p>This is the <a href="https://tokbox.com/developer/sdks/js/reference/Publisher.html" rel="nofollow noreferrer">web API</a>.</p>
  
  <p>Should I write methods that affect the publisher in the child component publisher.vue or should I do that in the parent component which calls publisher? </p>
  
  <p>Publisher.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt; &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import OT from "@opentok/client";
  
  export default {
      name: "publisher",
      props: {
          session: {
              type: OT.Session,
              required: false
          },
          rlive: Boolean,
          opts: {
              type: Object,
              required: false
          }
      },
      mounted: function() {
          // console.log(this.rlive)
          console.log("publisher created")
          console.log(this.session)
          const publisher = OT.initPublisher(this.$el, this.opts, err =&gt; {
              if (err) {
                  this.$emit("error", err);
              } else {
                  this.$emit("publisherCompleted");
              }
          });
          this.$emit("publisherCreated", publisher);
  
          const publish = () =&gt; {
              this.session.publish(publisher, err =&gt; {
                  if (err) {
                      this.$emit("error", err);
                  } else {
                      this.$emit("publisherConnected", publisher);
                  }
              });
          };
  
  
          if (this.session &amp;&amp; this.session.isConnected()) {
              // console.log("this.session &amp;&amp; this.session.isConnected()")
  
              publish();
  
              // console.log(publisher)
          }
          if (this.session) {
              console.log("this.session")
              console.log(publisher)
              this.session.on("sessionConnected", publish);
  
          }
  
          if(!this.session){
              console.log("!this.session")
          }
      },
      beforeDestroy: function(){
          console.log("before destroy");
          console.log(publisher)
          console.log(publish)
          //here is where I want to KEEEEEL!
          // console.log(publisher)
          // console.log(this.session)
      }
  };
  &lt;/script&gt;
  </code></pre>