[SalesForce] Lightning combobox options attribute not showing any options!

I read the documentation you mentioned in the comments and it says attribute of type Aura.Component[] is called a facet. Then I checked the documentation about Component facet and came up with the below working example on how to use the attribute type List in other attribute of type Aura.Component[]:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]">
    </aura:attribute>
    {!v.bar}
</aura:component>

HellWorld.app:

<aura:application extends="force:slds">
    <aura:attribute name="foo" type="List" default="['red','blue','green']"/>
    <c:HelloWorld>
        <aura:set attribute="bar">
            <aura:iteration items="{!v.foo}" var="item">
                <p><aura:text value="{!item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>
</aura:application>

Output:

UPDATE:

I did not work much on Lightning but I was curious on how to solve the issue you are talking about in comments so I came up with this example:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]" access="global">
    </aura:attribute>
    <aura:attribute name="baz" type="Aura.Component[]" access="global">
    </aura:attribute>    
    <aura:attribute name="componentNumber" type="String" access="global">
    </aura:attribute>
    Below are the contents of {!v.componentNumber} component: <br></br>
    <div style="background-color:red">{!v.bar}</div>
    <div style="background-color:yellow">{!v.baz}</div>
    <div style="background-color:green">{!v.body}</div>
</aura:component>

HelloWorldApp.app

<aura:application extends="force:slds">

    <aura:attribute name="foo1" type="List" default="['red','blue','green']"/>
    <aura:attribute name="foo2" type="List" default="['Orange','Apple','Mango']"/>

    <c:HelloWorld aura:id="first" componentNumber="1">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo1}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>

    <c:HelloWorld aura:id="second" componentNumber="2">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo2}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>     
    </c:HelloWorld>

    <div></div>

    <ui:button  label="Update first component with second component body" 
                press="{!c.updateFirstCmp}"/>

</aura:application>

HelloWorldAppController.js:

({
    updateFirstCmp : function(component, event, helper) {
        debugger;
        var secondCmpBdy = component.find('second').get('v.bar');
        // Setting the attribute of type Aura.Component[] of first HelloWorld Component from 
        // second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.baz',secondCmpBdy);
        // Setting the body(type Aura.Compoent[] as per docs) of first HelloWorld Component 
        // from second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.body',secondCmpBdy);
    }   
})

Output:

After clicking on the button: (second component still exists on the page while the content is copied to first component)

I am learning a lot from this question :)

This cannot be achieved through wired property. You should be using wired function as below:

@track value = '';
@track StatePicklistValues;
@wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATE_FIELD
})
getStatePicklistValues(result) {
    if (result.data) {
        console.log(JSON.stringify(result.data));
        this.StatePicklistValues = [ { label: 'Select State', value: '', selected: true }, ...result.data.values ];
    } else if (result.error) {
        alert('ERROR');
    }
}

For sorting, you can do custom sort as follows while assigning:

...result.data.values.sort(function(a, b){return // custom logic});

Note: You should remove placeholder from combobox