title: Vue2 passing arbitrary named variable as prop
body: <p>I am new to Vue and after checking the docs I can not figure out how to achieve the following:</p>
  <ul>
  <li>pass an arbitrarily named variable as a prop to a component instance.</li>
  </ul>
  <p>From my understanding, props are meant to be a way to allow data to be passed to a component and as it states on the website:</p>
  <blockquote>
  <p>Passing Data to Child Components with Props:
  Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.</p>
  </blockquote>
  <p>Since props can be <code>required</code>, it would seem that we can design components under the assumption that some data would be there, and possible within certain parameters (if the validator option is specified).</p>
  <p>So I would like to define a function or object <em>outside</em> of vue, e.g. in an application, and pass this function or object to my vue instance.</p>
  <p>This works if my named object of function has the exact same name as the prop to which I attempt to bind it. However, as I might have multiple instances of the Vue component and I might want to bind different data, I find using the same name for the variable less than ideal.</p>
  <p>Now if I do as the Vue warning suggests, and name object / function the same as the prop, then the warning switches to that my data is not defined inside vue and to make sure it is reactive by reading: <a href="https://v2.vuejs.org/v2/guide/components-props.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components-props.html</a></p>
  <p>which, to be honest, doesnt really explain how to solve the issue,</p>
  <p>or move the prop to the data level.</p>
  <p>Which I can do (still gives the same warning), but kind of defeats the purpose of having props with my understanding of Vue.</p>
  <p>This become more frustrating with anonymous vue instances.</p>
  <p>e.g.</p>
  <pre><code>&lt;script&gt;
  export default {
    props: {
      // records: {
      //   default: function(){return{}},
      //   type: Object
      // }
    },
    data: function() {
      return {
        records: {} // define even an empty value in data for it to be 'reactive'
      }
    },
    computed: {
      fields: function() {
  
      },
      keys: function() {
        return Object.keys(this.records)
      }
    },
    methods: {
  
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>trying to use this as a component and set records to <code>var myRecords = {&quot;a&quot;: {}}</code> fails:</p>
  <pre><code>&lt;my-comp :records=&quot;myRecords&quot;/&gt;
  </code></pre>
  <p>So how <em>exactly</em> should I circumvent this? Where should I define my data then? and how should I handle the naming in the case of multiple instances?</p>
  <p>A more fledged on example is found on a similar question:</p>
  <p><a href="https://stackoverflow.com/questions/50853417/vue2-passing-function-as-prop-triggers-warning-that-prop-is-already-set/50854088#50854088">Vue2: passing function as prop triggers warning that prop is already set</a></p>