title: Can't use imported object in Vue props validator
body: <p>I'm trying to create a <code>validator</code> function for a Vue component's prop. </p>
  
  <p>The <code>validator</code> function requires an imported object to do the validation, however, when the <code>validator</code> function is run, the imported object is <code>undefined</code>.</p>
  
  <p>Once the component has been mounted, the imported object <strong>is</strong> defined <em>(so there isn't a problem with the import syntax)</em>.</p>
  
  <p>My component's Javascript code is as follows:</p>
  
  <pre><code>&lt;script&gt;
      import {EventTypes, PageTypes, logger} from "../core/EventLogger";
      import FAQ from "./FAQ";
      export default {
          name: "MobilityFAQs",
          components: {
              FAQ
          },
          props: {
              faqs: {
                  required: true,
                  type: Array
              },
              pageType: {
                  required: true,
                  validator: value =&gt; {
                      return value in PageTypes
                      // PageTypes is undefined here.
                  }
              }
          },
          mounted() {
              console.log(PageTypes);
              // PageTypes is defined here.
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The same issue occurs with different function definition syntax:</p>
  
  <pre><code>validator: function(value) {
      return value in PageTypes
  }
  </code></pre>
  
  <p>There is a warning in the documentation that you will not be able to access instance properties in the <code>validator</code> function, as expected, but this is not an instance property.</p>
  
  <blockquote>
    <p>Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions.</p>
  </blockquote>
  
  <p>How can I use the imported object in the <code>validator</code> function?</p>
  
  <hr>
  
  <p><strong>Update following Jacobs answer:</strong></p>
  
  <p>I was incorrectly using Javascript's <code>in</code> operator.</p>
  
  <p>My updated <code>validator</code> function is now:</p>
  
  <pre><code>validator: value =&gt; Object.values(PageTypes).includes(value)
  </code></pre>