title: How do I pass data from <layout> in <template> to a method in my export default in Vue?
body: <p>I'm trying to collect the text from a text input in HTML to the methods section of my Vue file but can't seem to figure it out. I've spent a couple hours researching v-model and messing around with it but, I was either doing it wrong or it doesn't do what I thought it did. Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;Layout&gt;
        &lt;input id="queryBox" placeholder="Enter your SQL query here." size="60"/&gt;
        &lt;br&gt;
        &lt;input type="submit" v-on:click="logSomething()"&gt;
      &lt;/Layout&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: () =&gt; {
        return {
          queryText: ""
        }
      },
      methods: {
        logSomething() {
          console.log(this.queryBox)
        }
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm trying to send whatever the user inputs into queryBox to the logSomething() method upon the click of the submit button. Thanks in advance for any help!</p>