OK, let me help you out a bit.
What is v-bind and v-model?
Ref: https://v2.vuejs.org/v2/api/#v-model and https://v2.vuejs.org/v2/guide/components#Using-v-model-on-Components
With v-bind you can pass data to a component (dynamically). That means, if you have a component that has a sub-component and the sub-component needs some infos, you can pass them down one-way. Changes in the sub-component are technically possible but will cause all sort of trouble. Don’t do it!
To bring back information from the sub-component to the component, Vue uses events. So, the sub-component can say something like “Hey, the user clicked on user John. Please update this!” The main component can then decide (or not) to update the state, which in turn will be dynamically forwarded to the sub-component.
This structure (from the view of the main component) is very common. Normally, you would add a v-bind (putting the info downwards) plus a v-on (receiving events). As a sort of better dev experience (mostly), v-model was introduced that does this under the hood. Therefore v-model is considered two-way binding as the sub-component can directly affect the main component’s data.
However, be careful when nesting v-models (so there is a sub-sub-component also with the same v-model). Things can get hairy there quickly.
What is v-bind and how does it work in detail?
Ref: API — Vue.js
There is more to the examples, namely the v-bind. But first you have to understand its twofold usage.
The trivial usage is like this (just to get the basic idea, does not make much sense here)
<NcSelectUsers v-bind:inputLabel="'foo'" placeholder="this" />
without v-bind you can assign static information to the (sub-) component. The placeholder attribute will get the string this. No modifications made.
If you prefix an attribute with v-bind:, you tell Vue that this value is to be updated during runtime and to update the component accordingly. The value (in this case it is 'foo', mind the single quotes(!)) is a JS string foo as inputLabel attribute. So, you can put arbitrary JS expressions in the value of such a v-bind entry. To use a static string foo, you have to double-quote. You could as well put a dynamic information like selectedprops[0].options[2].displayName (but then without double-quotes).
As you need v-bind: prefix very often, there is a shorthand for it: :. So, the above would be equivalent to
<NcSelectUsers :inputLabel="'foo'" placeholder="this" />
The NcSelectUsers component allows to define all sorts of attributes. You could add them all one by one using v-bind: or :. Vue has understood, however, that there might be the need to dynamically add or remove attributes or to control them in a more programmatic way. Thus, you can use the syntax v-bind="expr". (Note, there is no : and a attribute name here.)
This will look at the expression expr and take all keys of it (it should be an object) as names for attributes. The values are the values of the attributes. So, lets revisit the example (again). We could set
expr = {
inputLabel: "foo",
}
and use
<NcSelectUsers v-bind="expr" placeholder="this" />
This is how the documentation is build: There is an array of possible setting to show and using the v-bind bind all parameters are pre-filled.
Why both v-bind and v-model
In the style guilde both are used. The v-bind is used to configure the component. The v-model is used to set (and get) the selected value.
The cause for it not working is that the value of v-model is not existing. It points to selectArray[i].props.value (i is just the index from the loop) which is not part of the data below. Therefore, I guess Vue gets a problem and cannot store the selected user anywhere (storing to undefined makes no sense). I have not tried it but this seems rather logical to me.
I hope this helps
Chris